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?
You can find all the code to the entire page here http://pastebin.com/Vxxd0NDm
I am trying to add it under line 217.
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/