Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Div's Background in Bootstrap full width

Hi :) I'm new in webdevelopment and using Bootstrap. Is it possible to let a Div's background in bootstrap having the full width of the browser window? Thanks for answering :)

16 Answers

Thanks for your answer. But it still doesn't work:( I have a div with the class of container and container-full-width. In css i set the div's width of 100% but it doesn't work:(

idan ben yair
idan ben yair
10,288 Points

Ok, do you have a div and you are trying to define a background to it and its not taking the full width of the div? Or are you trying to make the div itself take a width of 100% of the full body content?

div {
  width: 100%;  /*this will make the div take 100% of the full content*/
}

div img {
 width: 100%;  /*this will make the image that is inside the div to take 100% of the div*/
}

Let me know if that helped.

Also remember Twitter Bootstrap should already have an automatic scaling for images that may be bigger than its encapsulating parent element:

/* Bootstrap 2.3.2 and probably the same for Bootstrap 3 */
img {
  width: auto\9; 
  height: auto;
  max-width: 100%; /* Auto scale */
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

This is useful when using responsive design or a fluid layout.

I have a div with this css : .container-full-width { background: url(../img/img_2.jpg) no-repeat; width: 100%; height: 600px;
}

But it also has the bootstrap container class. Now i want to make it the full width of the browser-window.

idan ben yair
idan ben yair
10,288 Points

use

body {
    margin: 0 auto;
    padding: 0 auto;
}

it will reset the browser automatic paddings and margins and will allow you to stretch the whole div across the browser.

Let me know if that worked for you :)

It's confusing.. It still doesn't work. I also tried with a new div and set it's background to a color. But it doesn't want to take the whole width:(::(

I deleted the container div which is around all the others ( after the body element) Now it works. Can anyone maybe explain me what's going on here? :D Do I need the container around my whole document? Thanks:)

idan ben yair
idan ben yair
10,288 Points

Sure, the container div, has it's own attributes and is located in the body, there are some automatic CSS setting applying to elements and maybe that's the reason it was happening, you can use a normalize CSS file which will help you reset those settings but I do not want to confuse you know with that. Keep learning here on treehouse and you will get to that and you will understand things a lot better. I promise you :)

Don't stop learning. Have a great day :)

Here is an example using Bootstrap 3.2 using two ways: 1) I applied a background image to a div with the class col-lg-12 for maximum width 2) I added an image within a div with the class col-lg-12 for maximum width.

I also added a max-height of 200px for both and hide the overflow so that the image height does not add space to the div.

You can see it live here: http://www.bootply.com/5csKluxsvn

Also there is a special case where if you add the <img> element it will apply an auto scale as I mentioned before.

Does this help?

A little bit. But it doesn't work, also if I set the image as the background of the col-lg-12 divs :(

I gave my html und body element a width of 100% and now it works. But I have a small margin which I can't delete:(

idan ben yair
idan ben yair
10,288 Points

Hi Norman,

Did you apply this to the body?

body {
  margin: 0 auto;
  padding: 0 auto;
}

Try that on the div as well.

Yes, i did. It's confusing...

Does anyone have an idea? I didn't find a solution till now :( Also if i use the jumbotron class...

Melinda Golden
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Melinda Golden
Full Stack JavaScript Techdegree Graduate 25,815 Points

Wrap the container in a section...

<section id="new-section">
        <div class="container">
              <div class="row">
                    <div class="col-md-12">
                           <p>Content goes here</p>
                    </div>
              </div>
        </div>
</section>
idan ben yair
idan ben yair
10,288 Points

Yup it is possible just give the div's background a width of 100%

Let me know if that works for you :)

Kevin Korte
Kevin Korte
28,135 Points

Bootstrap has a container class called .container-fluid that is set to 100% by default width, and will span the entire display.

Kevin Fitzhenry
Kevin Fitzhenry
30,096 Points

Kevin Korte can you use a .container and .container-fluid on the same page? I know you're aren't supposed to nest one inside the other or vice versa. But say you wanted the header to be .container, then below that you wanted a hero image that is .container-fluid, then below that you wanted the rest of your content to in a .container.

Is it risky to be using both on the same page? What's the best work around for achieving what I described above?

Thanks in advance for your time!

Kevin Korte
Kevin Korte
28,135 Points

There would be no need to do that. It could also cause some unexpected weirdness with additional padding.

What I would do instead is close your container div, open a new .container-fluid div, put your hero there, close that div, and than open another container div for the rest of the content.

That would make your hero expand the full width of the page, which is what I assume you are referring to. Nesting a container-fluid inside a container div will still not allow the full width container-fluid div to expand past the parent container.

Does that help?

Kevin Korte
Kevin Korte
28,135 Points

Awesome, you're welcome! Let us know how it goes.