CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
James Snowy
James Snowy

Reputation: 415

How can I change the color of my body when using Bootstrap?

I'm trying out programming Bootstrap and when I was going to change the color of my body using simply: 

body {
  background-color: #eba; 
  width: 100%; 
  height: 100%;
}

It didn't work, so my question is how can I style anything when using Bootstrap? I've looked in the developer's tools and found that background-color: #eba; got ignored and replaced by the default Bootstrap body color, why is that? Shouldn't the Bootstrap Default body color get ignored instead of mine? (I might have put two questions in one, so forgive me).

Relevant HTML

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <h4>Column 1</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro exercitationem provident explicabo ipsa consequuntur, quidem dolorem perferendis veritatis facilis fugiat deleniti natus quod laboriosam eum incidunt consequatur cumque voluptates. Repellat.
                </p>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <h4>Column 2</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro exercitationem provident explicabo ipsa consequuntur, quidem dolorem perferendis veritatis facilis fugiat deleniti natus quod laboriosam eum incidunt consequatur cumque voluptates. Repellat.
                </p>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <h4>Column 3</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro exercitationem provident explicabo ipsa consequuntur, quidem dolorem perferendis veritatis facilis fugiat deleniti natus quod laboriosam eum incidunt consequatur cumque voluptates. Repellat.
                </p>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <h4>Column 4</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro exercitationem provident explicabo ipsa consequuntur, quidem dolorem perferendis veritatis facilis fugiat deleniti natus quod laboriosam eum incidunt consequatur cumque voluptates. Repellat.
                </p>
            </div>
        </div>
    </div>
</body>
</html>

Relevant CSS

body {
    background-color: #eba;
}

Upvotes: 0

Views: 864

Answers (2)

Atikur Rahman
Atikur Rahman

Reputation: 552

place your custom css after including bootstrap.css or bootstrap.min.css

or add !important keyword to your css

<style type="text/css">
body{background: #eba !important;}
</style>

Upvotes: 4

Bhavin Solanki
Bhavin Solanki

Reputation: 4818

You have to include your custom .css file after bootstrap.css/bootstrap.min.css Or else you can use '!important' to make your change.

For example : 

body {
  background-color: #eba !important; 
  width: 100%; 
  height: 100%;
}

Upvotes: 2

Related Questions