Changing the background color of the grid in bootstrap including the sides it doesn't reach

Question

Sorry if this is worded poorly, so if I had something like this

<body>
<main role="main" class="container">
  <div class="row">
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">2</div>
  <div class="col-sm-4">3</div>
  <div class="col-sm-6">Some Text</div>
  <div class="col-sm-6">Some Text</div>
  <div class="col-sm-12">6</div>
</div>
</main>
</body>

I'd want to change the color of #test to something else but if I do something like

body {
   background-color: grey;
}
#test {
   background-color: yellow;
   background-size: cover;
}

It will only color the background of the grid and not the entire page. The sides of the page will remain white and I don't know how to remedy this

I'd like the yellow to reach the edge of the page

Example of the yellow not reaching

Can you share the full code here or share a URL where we can check? — Angrej Kumar, Apr 19 '20 at 06:30
Heres what happens when I do that https://i.stack.imgur.com/ZyJYv.png It doesn't allow the yellow to reach the edge — Sonohi, Apr 19 '20 at 07:32
Actually you'll have to use `.container-fluid` > `.row.bg-primary` > `.container` > `.row` > `.col` — Tim Vermaelen, Apr 19 '20 at 11:22

Kunal Raut · Accepted Answer · 2020-04-19T08:07:28.637

0

For the backgorung of the the page add css as

body {
  background-color: grey;
}

And for the background of the grid to be different take the grid id as #test and aplly the css as

#test {
  background-color: yellow;
  border: 1px solid red;
  height: 20px;
}

And channge your main class to

<main class = "container-fluid">

Have a look at the following image

Note: Body changes the color of the whole body of the page whereas #test changes the color of the test id specified to respective class.

edited Apr 19 '20 at 08:07

answered Apr 19 '20 at 06:51

Kunal Raut

2,495
2
9
25

But the sides of the grid are still the body background color and not the color of the grid – Sonohi Apr 19 '20 at 07:26
can you please provide your whole code i wanna see the upper part of the code. – Kunal Raut Apr 19 '20 at 07:36
I changed it to my exact code, this is what it's giving me https://i.imgur.com/Cdd50Qf.png – Sonohi Apr 19 '20 at 07:55
Check out my edited code it will work. – Kunal Raut Apr 19 '20 at 07:59
It was because of the class container which leaves some margins to left and the right side . – Kunal Raut Apr 19 '20 at 08:00
Oh I see! Is there any special way to keep the class="container" look while expanding the background or will I have to change it and just mess the margins? – Sonohi Apr 19 '20 at 08:07
Actually these are the default classes created by bootstrap but if you have to name the class as `container` you must make changes in the bootstrap.css file for the class container. – Kunal Raut Apr 19 '20 at 08:10
Ok perfect, thank you! – Sonohi Apr 19 '20 at 08:12
if the user is using boottstrap itself that classes should have been used!! – Nikhil S Apr 19 '20 at 08:20
@nikhilsugandh ok. – Kunal Raut Apr 19 '20 at 08:21
@KunalRaut although giving it a thumbs up!! – Nikhil S Apr 19 '20 at 08:23
@nikhilsugandh thanks i was just solving the doubts before for classes and your statement is 100% correct about it though. – Kunal Raut Apr 19 '20 at 08:26

score 0 · Answer 2 · answered Apr 19 '20 at 06:54

0

Just add

    #test
     {
     Background-color:grey;
     background-size:cover}

answered Apr 19 '20 at 06:54

Himanshu

3,830
2
10
29

I've tried this but it didn't work, thanks for the help though – Sonohi Apr 19 '20 at 07:21
Change background-color to background-image – Himanshu Apr 19 '20 at 13:41

Changing the background color of the grid in bootstrap including the sides it doesn't reach

2 Answers2