Unable to overwrite bootstrap with external css

I recently started a coding bootcamp and we are learning about bootstrap. A lot of my friends prefer to stay away from bootstrap for other reasons, but we are learning it in class so no choice. Anyway, I've tried many things. I've tried adding a new class to the element I'm trying to style, I've tried to be specific like div > p .lead, and quite a few other ideas, all followed by the !important text. I am starting to think perhaps maybe my external stylesheet isn't being linked properly. I've quadruple checked the file locations and tried changing things to see if that would help, still no dice. I've tried reaching out to some of my friends for help as well, but most of them are already at work and can't help me at the moment, so that brings me here!

My HTML and CSS code. I know the CSS is pretty plain, this is just for testing purposes, trying to find out how to overwrite the html. I greatly appreciate your time for looking at this.

On a side note, a lot of my classmates make fun of how I space out my coding. If you guys think this is an issue, speak up! I want to know so I don't get locked into one way of doing things, and have time to adjust my muscle memory before it sets in and becomes tough to change! Thank you

.jumbotron h1

{

    background-image: url(/img/pizza.png) !important;

}

title

{

    font-family: cursive !important;

}

<!DOCTYPE html>

<html 

    lang="en"

>

<head>

<link 

    rel="stylesheet" 

    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 

    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 

    crossorigin="anonymous"

>

<link 

    rel="stylesheet"

    type="text/css"

    href="/css/custom.css"

>



<meta 

    charset="UTF-8"

>

<meta 

    name="viewport" 

    content="width=, initial-scale=1.0"

>

<meta 

    http-equiv="X-UA-Compatible" 

    content="ie=edge"

>

<title>

    Pizza World

</title>

</head>

<body>

<nav 

    class="navbar navbar-expand-lg navbar-light bg-light"

>

    <a 

        class="navbar-brand" 

        href="#"

    >

        Pizza World

    </a>

    <button 

        class="navbar-toggler" 

        type="button" 

        data-toggle="collapse" 

        data-target="#navbarSupportedContent" 

        aria-controls="navbarSupportedContent" 

        aria-expanded="false" 

        aria-label="Toggle navigation"

    >

    <span 

        class="navbar-toggler-icon"

    >

    </span>

    </button>

<div 

        class="collapse navbar-collapse" 

        id="navbarSupportedContent"

>

    <ul 

        class="navbar-nav mr-auto"

    >

        <li 

            class="nav-item active"

        >

        <a 

            class="nav-link" 

            href="#"

        >

            Order Online 

        <span 

            class="sr-only"

        >

            (current)

        </span>

        </a>

        </li>

        <li 

            class="nav-item"

        >

        <a 

            class="nav-link" 

            href="#"

        >

            Menu

        </a>

        </li>

<form 

    class="form-inline my-2 my-lg-0"

>

    <input 

        class="form-control mr-sm-2" 

        type="search" 

        placeholder="Zip Code" 

        aria-label="Zip Code"

    >

    <button 

        class="btn btn-outline-success my-2 my-sm-0" 

        type="submit"

    >

        Search stores near you!

    </button>

</form>

</div>

</nav>

<div 

    class="jumbotron"

>

        <h1 

            class="display-12 myh1class"

        >

            Hello, world!

        </h1>

        <p 

            class="lead"

        >

            This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

        </p>

        <hr 

            class="my-4"

        >

        <p>

                It uses utility classes for typography and spacing to space content out within the larger container.

        </p>

        <p 

        class="lead"

        >

          <a 

            class="btn btn-primary btn-lg" 

            href="#" 

            role="button"

        >

            Learn more

        </a>

        </p>

      </div>

<script             

    src="https://code.jquery.com/jquery-3.2.1.slim.min.js" i

    ntegrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 

    crossorigin="anonymous"

>

</script>

<script 

    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 

    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 

    crossorigin="anonymous"

>

</script>

<script 

    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 

    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 

    crossorigin="anonymous"

>

</script>



    

</body>

</html>

edited Nov 13 at 19:49

DavOS

6441621

asked Nov 13 at 17:28

MakeVio

142

It seems the jumbotron bgimg CSS style is applying/loading, but the image isn't resolving. Check the path?
– circusdei
Nov 13 at 17:38

Are you referring to the path of the image? If so, yes it's in the correct location. I've even tried adding an id ontp of the element class to try and specifically target it, but still no luck. Not sure if you can view this, but the pizza is inside my img folder as it should be I believe puu.sh/C1bqS/6647f966f0.png
– MakeVio
Nov 13 at 17:39

Replacing the img URL in your snippet with a valid image results in the title BG showing: imgur.com/a/IC6Yfl8 ... Could be a permissions issue?
– circusdei
Nov 13 at 17:49

You are trying to add the background to the jumbotron? or the title of the jumbotron?
– MartinBA
Nov 13 at 17:51

@circusdei I even tried adding a url into the background image like you're doing, however still no luck. .jumbotron h1 { background-image: url(puu.sh/C1c9A/a8ed4b2c26.png) !important; } I really am starting to think it's just not being linked correctly to my stylesheet, i'll look into this more now
– MakeVio
Nov 13 at 18:01

|
show 4 more comments

My HTML and CSS code. I know the CSS is pretty plain, this is just for testing purposes, trying to find out how to overwrite the html. I greatly appreciate your time for looking at this.

.jumbotron h1

{

    background-image: url(/img/pizza.png) !important;

}

title

{

    font-family: cursive !important;

}

<!DOCTYPE html>

<html 

    lang="en"

>

<head>

<link 

    rel="stylesheet" 

    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 

    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 

    crossorigin="anonymous"

>

<link 

    rel="stylesheet"

    type="text/css"

    href="/css/custom.css"

>



<meta 

    charset="UTF-8"

>

<meta 

    name="viewport" 

    content="width=, initial-scale=1.0"

>

<meta 

    http-equiv="X-UA-Compatible" 

    content="ie=edge"

>

<title>

    Pizza World

</title>

</head>

<body>

<nav 

    class="navbar navbar-expand-lg navbar-light bg-light"

>

    <a 

        class="navbar-brand" 

        href="#"

    >

        Pizza World

    </a>

    <button 

        class="navbar-toggler" 

        type="button" 

        data-toggle="collapse" 

        data-target="#navbarSupportedContent" 

        aria-controls="navbarSupportedContent" 

        aria-expanded="false" 

        aria-label="Toggle navigation"

    >

    <span 

        class="navbar-toggler-icon"

    >

    </span>

    </button>

<div 

        class="collapse navbar-collapse" 

        id="navbarSupportedContent"

>

    <ul 

        class="navbar-nav mr-auto"

    >

        <li 

            class="nav-item active"

        >

        <a 

            class="nav-link" 

            href="#"

        >

            Order Online 

        <span 

            class="sr-only"

        >

            (current)

        </span>

        </a>

        </li>

        <li 

            class="nav-item"

        >

        <a 

            class="nav-link" 

            href="#"

        >

            Menu

        </a>

        </li>

<form 

    class="form-inline my-2 my-lg-0"

>

    <input 

        class="form-control mr-sm-2" 

        type="search" 

        placeholder="Zip Code" 

        aria-label="Zip Code"

    >

    <button 

        class="btn btn-outline-success my-2 my-sm-0" 

        type="submit"

    >

        Search stores near you!

    </button>

</form>

</div>

</nav>

<div 

    class="jumbotron"

>

        <h1 

            class="display-12 myh1class"

        >

            Hello, world!

        </h1>

        <p 

            class="lead"

        >

            This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

        </p>

        <hr 

            class="my-4"

        >

        <p>

                It uses utility classes for typography and spacing to space content out within the larger container.

        </p>

        <p 

        class="lead"

        >

          <a 

            class="btn btn-primary btn-lg" 

            href="#" 

            role="button"

        >

            Learn more

        </a>

        </p>

      </div>

<script             

    src="https://code.jquery.com/jquery-3.2.1.slim.min.js" i

    ntegrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 

    crossorigin="anonymous"

>

</script>

<script 

    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 

    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 

    crossorigin="anonymous"

>

</script>

<script 

    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 

    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 

    crossorigin="anonymous"

>

</script>



    

</body>

</html>

edited Nov 13 at 19:49

DavOS

6441621

asked Nov 13 at 17:28

MakeVio

142

It seems the jumbotron bgimg CSS style is applying/loading, but the image isn't resolving. Check the path?
– circusdei
Nov 13 at 17:38

Are you referring to the path of the image? If so, yes it's in the correct location. I've even tried adding an id ontp of the element class to try and specifically target it, but still no luck. Not sure if you can view this, but the pizza is inside my img folder as it should be I believe puu.sh/C1bqS/6647f966f0.png
– MakeVio
Nov 13 at 17:39

Replacing the img URL in your snippet with a valid image results in the title BG showing: imgur.com/a/IC6Yfl8 ... Could be a permissions issue?
– circusdei
Nov 13 at 17:49

You are trying to add the background to the jumbotron? or the title of the jumbotron?
– MartinBA
Nov 13 at 17:51

@circusdei I even tried adding a url into the background image like you're doing, however still no luck. .jumbotron h1 { background-image: url(puu.sh/C1c9A/a8ed4b2c26.png) !important; } I really am starting to think it's just not being linked correctly to my stylesheet, i'll look into this more now
– MakeVio
Nov 13 at 18:01

|
show 4 more comments

My HTML and CSS code. I know the CSS is pretty plain, this is just for testing purposes, trying to find out how to overwrite the html. I greatly appreciate your time for looking at this.

.jumbotron h1

{

    background-image: url(/img/pizza.png) !important;

}

title

{

    font-family: cursive !important;

}

<!DOCTYPE html>

<html 

    lang="en"

>

<head>

<link 

    rel="stylesheet" 

    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 

    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 

    crossorigin="anonymous"

>

<link 

    rel="stylesheet"

    type="text/css"

    href="/css/custom.css"

>



<meta 

    charset="UTF-8"

>

<meta 

    name="viewport" 

    content="width=, initial-scale=1.0"

>

<meta 

    http-equiv="X-UA-Compatible" 

    content="ie=edge"

>

<title>

    Pizza World

</title>

</head>

<body>

<nav 

    class="navbar navbar-expand-lg navbar-light bg-light"

>

    <a 

        class="navbar-brand" 

        href="#"

    >

        Pizza World

    </a>

    <button 

        class="navbar-toggler" 

        type="button" 

        data-toggle="collapse" 

        data-target="#navbarSupportedContent" 

        aria-controls="navbarSupportedContent" 

        aria-expanded="false" 

        aria-label="Toggle navigation"

    >

    <span 

        class="navbar-toggler-icon"

    >

    </span>

    </button>

<div 

        class="collapse navbar-collapse" 

        id="navbarSupportedContent"

>

    <ul 

        class="navbar-nav mr-auto"

    >

        <li 

            class="nav-item active"

        >

        <a 

            class="nav-link" 

            href="#"

        >

            Order Online 

        <span 

            class="sr-only"

        >

            (current)

        </span>

        </a>

        </li>

        <li 

            class="nav-item"

        >

        <a 

            class="nav-link" 

            href="#"

        >

            Menu

        </a>

        </li>

<form 

    class="form-inline my-2 my-lg-0"

>

    <input 

        class="form-control mr-sm-2" 

        type="search" 

        placeholder="Zip Code" 

        aria-label="Zip Code"

    >

    <button 

        class="btn btn-outline-success my-2 my-sm-0" 

        type="submit"

    >

        Search stores near you!

    </button>

</form>

</div>

</nav>

<div 

    class="jumbotron"

>

        <h1 

            class="display-12 myh1class"

        >

            Hello, world!

        </h1>

        <p 

            class="lead"

        >

            This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

        </p>

        <hr 

            class="my-4"

        >

        <p>

                It uses utility classes for typography and spacing to space content out within the larger container.

        </p>

        <p 

        class="lead"

        >

          <a 

            class="btn btn-primary btn-lg" 

            href="#" 

            role="button"

        >

            Learn more

        </a>

        </p>

      </div>

<script             

    src="https://code.jquery.com/jquery-3.2.1.slim.min.js" i

    ntegrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 

    crossorigin="anonymous"

>

</script>

<script 

    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 

    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 

    crossorigin="anonymous"

>

</script>

<script 

    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 

    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 

    crossorigin="anonymous"

>

</script>



    

</body>

</html>

edited Nov 13 at 19:49

DavOS

6441621

asked Nov 13 at 17:28

MakeVio

142

My HTML and CSS code. I know the CSS is pretty plain, this is just for testing purposes, trying to find out how to overwrite the html. I greatly appreciate your time for looking at this.

.jumbotron h1

{

    background-image: url(/img/pizza.png) !important;

}

title

{

    font-family: cursive !important;

}

<!DOCTYPE html>

<html 

    lang="en"

>

<head>

<link 

    rel="stylesheet" 

    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 

    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 

    crossorigin="anonymous"

>

<link 

    rel="stylesheet"

    type="text/css"

    href="/css/custom.css"

>



<meta 

    charset="UTF-8"

>

<meta 

    name="viewport" 

    content="width=, initial-scale=1.0"

>

<meta 

    http-equiv="X-UA-Compatible" 

    content="ie=edge"

>

<title>

    Pizza World

</title>

</head>

<body>

<nav 

    class="navbar navbar-expand-lg navbar-light bg-light"

>

    <a 

        class="navbar-brand" 

        href="#"

    >

        Pizza World

    </a>

    <button 

        class="navbar-toggler" 

        type="button" 

        data-toggle="collapse" 

        data-target="#navbarSupportedContent" 

        aria-controls="navbarSupportedContent" 

        aria-expanded="false" 

        aria-label="Toggle navigation"

    >

    <span 

        class="navbar-toggler-icon"

    >

    </span>

    </button>

<div 

        class="collapse navbar-collapse" 

        id="navbarSupportedContent"

>

    <ul 

        class="navbar-nav mr-auto"

    >

        <li 

            class="nav-item active"

        >

        <a 

            class="nav-link" 

            href="#"

        >

            Order Online 

        <span 

            class="sr-only"

        >

            (current)

        </span>

        </a>

        </li>

        <li 

            class="nav-item"

        >

        <a 

            class="nav-link" 

            href="#"

        >

            Menu

        </a>

        </li>

<form 

    class="form-inline my-2 my-lg-0"

>

    <input 

        class="form-control mr-sm-2" 

        type="search" 

        placeholder="Zip Code" 

        aria-label="Zip Code"

    >

    <button 

        class="btn btn-outline-success my-2 my-sm-0" 

        type="submit"

    >

        Search stores near you!

    </button>

</form>

</div>

</nav>

<div 

    class="jumbotron"

>

        <h1 

            class="display-12 myh1class"

        >

            Hello, world!

        </h1>

        <p 

            class="lead"

        >

            This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

        </p>

        <hr 

            class="my-4"

        >

        <p>

                It uses utility classes for typography and spacing to space content out within the larger container.

        </p>

        <p 

        class="lead"

        >

          <a 

            class="btn btn-primary btn-lg" 

            href="#" 

            role="button"

        >

            Learn more

        </a>

        </p>

      </div>

<script             

    src="https://code.jquery.com/jquery-3.2.1.slim.min.js" i

    ntegrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 

    crossorigin="anonymous"

>

</script>

<script 

    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 

    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 

    crossorigin="anonymous"

>

</script>

<script 

    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 

    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 

    crossorigin="anonymous"

>

</script>



    

</body>

</html>

.jumbotron h1

{

    background-image: url(/img/pizza.png) !important;

}

title

{

    font-family: cursive !important;

}

<!DOCTYPE html>

<html 

    lang="en"

>

<head>

<link 

    rel="stylesheet" 

    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 

    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 

    crossorigin="anonymous"

>

<link 

    rel="stylesheet"

    type="text/css"

    href="/css/custom.css"

>



<meta 

    charset="UTF-8"

>

<meta 

    name="viewport" 

    content="width=, initial-scale=1.0"

>

<meta 

    http-equiv="X-UA-Compatible" 

    content="ie=edge"

>

<title>

    Pizza World

</title>

</head>

<body>

<nav 

    class="navbar navbar-expand-lg navbar-light bg-light"

>

    <a 

        class="navbar-brand" 

        href="#"

    >

        Pizza World

    </a>

    <button 

        class="navbar-toggler" 

        type="button" 

        data-toggle="collapse" 

        data-target="#navbarSupportedContent" 

        aria-controls="navbarSupportedContent" 

        aria-expanded="false" 

        aria-label="Toggle navigation"

    >

    <span 

        class="navbar-toggler-icon"

    >

    </span>

    </button>

<div 

        class="collapse navbar-collapse" 

        id="navbarSupportedContent"

>

    <ul 

        class="navbar-nav mr-auto"

    >

        <li 

            class="nav-item active"

        >

        <a 

            class="nav-link" 

            href="#"

        >

            Order Online 

        <span 

            class="sr-only"

        >

            (current)

        </span>

        </a>

        </li>

        <li 

            class="nav-item"

        >

        <a 

            class="nav-link" 

            href="#"

        >

            Menu

        </a>

        </li>

<form 

    class="form-inline my-2 my-lg-0"

>

    <input 

        class="form-control mr-sm-2" 

        type="search" 

        placeholder="Zip Code" 

        aria-label="Zip Code"

    >

    <button 

        class="btn btn-outline-success my-2 my-sm-0" 

        type="submit"

    >

        Search stores near you!

    </button>

</form>

</div>

</nav>

<div 

    class="jumbotron"

>

        <h1 

            class="display-12 myh1class"

        >

            Hello, world!

        </h1>

        <p 

            class="lead"

        >

            This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

        </p>

        <hr 

            class="my-4"

        >

        <p>

                It uses utility classes for typography and spacing to space content out within the larger container.

        </p>

        <p 

        class="lead"

        >

          <a 

            class="btn btn-primary btn-lg" 

            href="#" 

            role="button"

        >

            Learn more

        </a>

        </p>

      </div>

<script             

    src="https://code.jquery.com/jquery-3.2.1.slim.min.js" i

    ntegrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 

    crossorigin="anonymous"

>

</script>

<script 

    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 

    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 

    crossorigin="anonymous"

>

</script>

<script 

    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 

    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 

    crossorigin="anonymous"

>

</script>



    

</body>

</html>

.jumbotron h1

{

    background-image: url(/img/pizza.png) !important;

}

title

{

    font-family: cursive !important;

}

<!DOCTYPE html>

<html 

    lang="en"

>

<head>

<link 

    rel="stylesheet" 

    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 

    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 

    crossorigin="anonymous"

>

<link 

    rel="stylesheet"

    type="text/css"

    href="/css/custom.css"

>



<meta 

    charset="UTF-8"

>

<meta 

    name="viewport" 

    content="width=, initial-scale=1.0"

>

<meta 

    http-equiv="X-UA-Compatible" 

    content="ie=edge"

>

<title>

    Pizza World

</title>

</head>

<body>

<nav 

    class="navbar navbar-expand-lg navbar-light bg-light"

>

    <a 

        class="navbar-brand" 

        href="#"

    >

        Pizza World

    </a>

    <button 

        class="navbar-toggler" 

        type="button" 

        data-toggle="collapse" 

        data-target="#navbarSupportedContent" 

        aria-controls="navbarSupportedContent" 

        aria-expanded="false" 

        aria-label="Toggle navigation"

    >

    <span 

        class="navbar-toggler-icon"

    >

    </span>

    </button>

<div 

        class="collapse navbar-collapse" 

        id="navbarSupportedContent"

>

    <ul 

        class="navbar-nav mr-auto"

    >

        <li 

            class="nav-item active"

        >

        <a 

            class="nav-link" 

            href="#"

        >

            Order Online 

        <span 

            class="sr-only"

        >

            (current)

        </span>

        </a>

        </li>

        <li 

            class="nav-item"

        >

        <a 

            class="nav-link" 

            href="#"

        >

            Menu

        </a>

        </li>

<form 

    class="form-inline my-2 my-lg-0"

>

    <input 

        class="form-control mr-sm-2" 

        type="search" 

        placeholder="Zip Code" 

        aria-label="Zip Code"

    >

    <button 

        class="btn btn-outline-success my-2 my-sm-0" 

        type="submit"

    >

        Search stores near you!

    </button>

</form>

</div>

</nav>

<div 

    class="jumbotron"

>

        <h1 

            class="display-12 myh1class"

        >

            Hello, world!

        </h1>

        <p 

            class="lead"

        >

            This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

        </p>

        <hr 

            class="my-4"

        >

        <p>

                It uses utility classes for typography and spacing to space content out within the larger container.

        </p>

        <p 

        class="lead"

        >

          <a 

            class="btn btn-primary btn-lg" 

            href="#" 

            role="button"

        >

            Learn more

        </a>

        </p>

      </div>

<script             

    src="https://code.jquery.com/jquery-3.2.1.slim.min.js" i

    ntegrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 

    crossorigin="anonymous"

>

</script>

<script 

    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 

    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 

    crossorigin="anonymous"

>

</script>

<script 

    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 

    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 

    crossorigin="anonymous"

>

</script>



    

</body>

</html>

html css bootstrap-4

edited Nov 13 at 19:49

DavOS

6441621

asked Nov 13 at 17:28

MakeVio

142

edited Nov 13 at 19:49

DavOS

6441621

asked Nov 13 at 17:28

MakeVio

142

edited Nov 13 at 19:49

DavOS

6441621

edited Nov 13 at 19:49

DavOS

6441621

edited Nov 13 at 19:49

DavOS

6441621

asked Nov 13 at 17:28

MakeVio

142

asked Nov 13 at 17:28

MakeVio

142

asked Nov 13 at 17:28

MakeVio

142

It seems the jumbotron bgimg CSS style is applying/loading, but the image isn't resolving. Check the path?
– circusdei
Nov 13 at 17:38

Are you referring to the path of the image? If so, yes it's in the correct location. I've even tried adding an id ontp of the element class to try and specifically target it, but still no luck. Not sure if you can view this, but the pizza is inside my img folder as it should be I believe puu.sh/C1bqS/6647f966f0.png
– MakeVio
Nov 13 at 17:39

Replacing the img URL in your snippet with a valid image results in the title BG showing: imgur.com/a/IC6Yfl8 ... Could be a permissions issue?
– circusdei
Nov 13 at 17:49

You are trying to add the background to the jumbotron? or the title of the jumbotron?
– MartinBA
Nov 13 at 17:51

@circusdei I even tried adding a url into the background image like you're doing, however still no luck. .jumbotron h1 { background-image: url(puu.sh/C1c9A/a8ed4b2c26.png) !important; } I really am starting to think it's just not being linked correctly to my stylesheet, i'll look into this more now
– MakeVio
Nov 13 at 18:01

|
show 4 more comments

It seems the jumbotron bgimg CSS style is applying/loading, but the image isn't resolving. Check the path?
– circusdei
Nov 13 at 17:38

Are you referring to the path of the image? If so, yes it's in the correct location. I've even tried adding an id ontp of the element class to try and specifically target it, but still no luck. Not sure if you can view this, but the pizza is inside my img folder as it should be I believe puu.sh/C1bqS/6647f966f0.png
– MakeVio
Nov 13 at 17:39

Replacing the img URL in your snippet with a valid image results in the title BG showing: imgur.com/a/IC6Yfl8 ... Could be a permissions issue?
– circusdei
Nov 13 at 17:49

You are trying to add the background to the jumbotron? or the title of the jumbotron?
– MartinBA
Nov 13 at 17:51

@circusdei I even tried adding a url into the background image like you're doing, however still no luck. .jumbotron h1 { background-image: url(puu.sh/C1c9A/a8ed4b2c26.png) !important; } I really am starting to think it's just not being linked correctly to my stylesheet, i'll look into this more now
– MakeVio
Nov 13 at 18:01

It seems the jumbotron bgimg CSS style is applying/loading, but the image isn't resolving. Check the path?
– circusdei
Nov 13 at 17:38

Are you referring to the path of the image? If so, yes it's in the correct location. I've even tried adding an id ontp of the element class to try and specifically target it, but still no luck. Not sure if you can view this, but the pizza is inside my img folder as it should be I believe puu.sh/C1bqS/6647f966f0.png
– MakeVio
Nov 13 at 17:39

Replacing the img URL in your snippet with a valid image results in the title BG showing: imgur.com/a/IC6Yfl8 ... Could be a permissions issue?
– circusdei
Nov 13 at 17:49

You are trying to add the background to the jumbotron? or the title of the jumbotron?
– MartinBA
Nov 13 at 17:51

@circusdei I even tried adding a url into the background image like you're doing, however still no luck. .jumbotron h1 { background-image: url(puu.sh/C1c9A/a8ed4b2c26.png) !important; } I really am starting to think it's just not being linked correctly to my stylesheet, i'll look into this more now
– MakeVio
Nov 13 at 18:01

|
show 4 more comments

2 Answers
2

active

oldest

votes

It is possible to override the Bootstrap CSS in a number of ways.

You can use !important, as you have here, although it is not really the best way as it can cause unintended behavior later on.

You download the Bootstrap JS and CSS files and modify as needed (as opposed to using a CDN link in your headers) and include it in your project files.

You can use a CSS selector such as id="bootstrap-override" in your HTML. Bootstrap mostly uses classes which carry a weight 1/10th of that of an ID. Here is a good article that explains CSS Specificity

answered Nov 13 at 18:10

Glen Carpenter

784

add a comment |

The CSS is at external link and its first reading it, easiest way is to upload Bootstrap CSS to your work files and link it in html, after that just edit it as you want. Pretty easy.

answered Nov 13 at 22:26

First Name

869

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53286529%2funable-to-overwrite-bootstrap-with-external-css%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

It is possible to override the Bootstrap CSS in a number of ways.

You can use !important, as you have here, although it is not really the best way as it can cause unintended behavior later on.

You download the Bootstrap JS and CSS files and modify as needed (as opposed to using a CDN link in your headers) and include it in your project files.

You can use a CSS selector such as id="bootstrap-override" in your HTML. Bootstrap mostly uses classes which carry a weight 1/10th of that of an ID. Here is a good article that explains CSS Specificity

answered Nov 13 at 18:10

Glen Carpenter

784

add a comment |

It is possible to override the Bootstrap CSS in a number of ways.

You can use !important, as you have here, although it is not really the best way as it can cause unintended behavior later on.

You download the Bootstrap JS and CSS files and modify as needed (as opposed to using a CDN link in your headers) and include it in your project files.

You can use a CSS selector such as id="bootstrap-override" in your HTML. Bootstrap mostly uses classes which carry a weight 1/10th of that of an ID. Here is a good article that explains CSS Specificity

answered Nov 13 at 18:10

Glen Carpenter

784

add a comment |

It is possible to override the Bootstrap CSS in a number of ways.

You can use !important, as you have here, although it is not really the best way as it can cause unintended behavior later on.

You download the Bootstrap JS and CSS files and modify as needed (as opposed to using a CDN link in your headers) and include it in your project files.

You can use a CSS selector such as id="bootstrap-override" in your HTML. Bootstrap mostly uses classes which carry a weight 1/10th of that of an ID. Here is a good article that explains CSS Specificity

answered Nov 13 at 18:10

Glen Carpenter

784

It is possible to override the Bootstrap CSS in a number of ways.

You can use !important, as you have here, although it is not really the best way as it can cause unintended behavior later on.

You download the Bootstrap JS and CSS files and modify as needed (as opposed to using a CDN link in your headers) and include it in your project files.

You can use a CSS selector such as id="bootstrap-override" in your HTML. Bootstrap mostly uses classes which carry a weight 1/10th of that of an ID. Here is a good article that explains CSS Specificity

answered Nov 13 at 18:10

Glen Carpenter

784

answered Nov 13 at 18:10

Glen Carpenter

784

answered Nov 13 at 18:10

Glen Carpenter

784

answered Nov 13 at 18:10

Glen Carpenter

784

add a comment |

The CSS is at external link and its first reading it, easiest way is to upload Bootstrap CSS to your work files and link it in html, after that just edit it as you want. Pretty easy.

answered Nov 13 at 22:26

First Name

869

add a comment |

The CSS is at external link and its first reading it, easiest way is to upload Bootstrap CSS to your work files and link it in html, after that just edit it as you want. Pretty easy.

answered Nov 13 at 22:26

First Name

869

add a comment |

The CSS is at external link and its first reading it, easiest way is to upload Bootstrap CSS to your work files and link it in html, after that just edit it as you want. Pretty easy.

answered Nov 13 at 22:26

First Name

869

The CSS is at external link and its first reading it, easiest way is to upload Bootstrap CSS to your work files and link it in html, after that just edit it as you want. Pretty easy.

answered Nov 13 at 22:26

First Name

869

answered Nov 13 at 22:26

First Name

869

answered Nov 13 at 22:26

First Name

869

answered Nov 13 at 22:26

First Name

869

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk