htmlcsstwitter-bootstrap

Bootstrap full width row with color


I purchased a theme and I am trying to edit it but I am stuck on one thing. I am trying to add a row (full width bar with text in it) that extends from one side of screen to other. It is within the container so I understand that it is limited to the containers width.

I have tried multiple options from similar questions but could not get it to work.

I have tried: How to create a 100% screen width div inside a container in bootstrap?

Bootstrap Element 100% Width

You can find all the code to the entire page here http://pastebin.com/Vxxd0NDm

I am trying to add it under line 217.


Solution

  • You have to make sure to close the div that has container class and reopen it after the section you're about to create. Then, you just do a div this way:

        <div class="container">
            <!-- FIRST PART OF YOUR WEBSITE, BEFORE WHAT YOU WANT TO CREATE -->
        <div> <!-- End of .container, that you're adding -->
    
        <!--Now the 3 row part, fullscreen 100% document width-->
            <div>
                <div class="col-md-4"></div>
                <div class="col-md-4"></div>
                <div class="col-md-4"></div>
             </div>
      <!--Then, you reopen the container div that you have closed-->
      <div class="container">
      <!-- END OF YOUR WEBSITE, AFTER THE CODE YOU JUST ADDED -->
    

    In this example, you would have 3 column that would each take 1/3 of your full page section. A div is naturally full width of the parent element. Since you close the div that contains the container before (that center your code), it will take 100% of your document width.

    Look at the fiddle; dont forget to enlarge the output window in it so you don't see the mobile version: https://jsfiddle.net/oxw6tsuj/