CODEWITHSUNDEEP
htmlcssbootstrap-4
this is currently being update
this is currently being update

Reputation: 1

bootstrap 4 internal css modification

I'm new to bootstrap. Can anyone lend some insight on how to modify bootstrap. I created a example site but having trouble modifying after basic bootstrap. I have "container" and have the font blue but when I created another container "container new-place" and try to modify with interal css it doesn't work. Can I create my own "custom" bootstrap classes? How do I change the text of lets say I have ten "container new-place" and five "container" how can i modify each group?

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" http-equiv="X-UA-Compatible" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <style>
        h1 {

            color:yellow;
        }

        .container{

            color:blue;
        }

        .container new-place {

            color:red;
        }


    </style>

    <title>Practice Title</title>
  </head>
  <body>


        <div class="jumbotron jumbotron-fluid">
            <div class="container">
                <h1 class="display-3">Fluid jumbo heading</h1>
                <p class="lead">Jumbo helper text</p>
                <hr class="my-2">
                <p>More info</p>
                <p class="lead">
                    <a class="btn btn-primary btn-lg" href="Jumbo action link" role="button">Jumbo action name</a>
                </p>
            </div>
        </div>

        <div class="container new-place" date-time="00:00">
            <h1>hello</h1>
        </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Upvotes: 0

Views: 652

Answers (2)

Nova
Nova

Reputation: 364

You can. Use !important. For example: 

.container{
    color:blue !important;
}
.new-place {
    color:red !important;
}

Upvotes: 0

Colin Bacon
Colin Bacon

Reputation: 15609

You have the right idea, but the implementation is slightly wrong.

For example

<div class="container new-place" date-time="00:00">
    <h1>hello</h1>
</div>

You have created a style which combines two classes. This is correct as it will have a greater specificity and allow you to override the Bootstrap style. The css is incorrect. You have

.container new-place {
   color:red;
}

The css should be

.container.new-place {
    color:red;
}

Now the style will apply correctly.

Upvotes: 1

Related Questions