Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You simply messed up the hierarchy of your div tags a bit.</p> <p>You need to wrap the <code>.row</code> inside the <code>.container</code>, not the other way around. Wrap the <code>.jumbotron</code> (or any other custom class that you want to go full width as a background) around the container:</p> <pre><code>&lt;div class="jumbotron"&gt; &lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class="col-lg-12"&gt; &lt;h1&gt;Hello, world!&lt;/h1&gt; &lt;p&gt;...&lt;/p&gt; &lt;p&gt;&lt;a class="btn btn-primary btn-lg"&gt;Learn more&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>JSFiddle: <a href="http://jsfiddle.net/YdRd2/7/" rel="nofollow">http://jsfiddle.net/YdRd2/7/</a></p> <p>When you post questions here, try to include a JSFiddle that shows your problem (as isolated as possible). Fork this fiddle here to have Bootstrap already included: <a href="http://jsfiddle.net/SjfzQ/" rel="nofollow">http://jsfiddle.net/SjfzQ/</a></p> <p>Hope this helps.</p> <p>Edit: Forgot to mention that in this case you wouldn't even need the row anyway, since you're just going full width:</p> <pre><code>&lt;div class="jumbotron"&gt; &lt;div class="container"&gt; &lt;h1&gt;Hello, world!&lt;/h1&gt; &lt;p&gt;...&lt;/p&gt; &lt;p&gt;&lt;a class="btn btn-primary btn-lg"&gt;Learn more&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>JSFiddle: <a href="http://jsfiddle.net/YdRd2/8/" rel="nofollow">http://jsfiddle.net/YdRd2/8/</a></p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload