Databases
StackOverflow2013
Postsdbo
POUsing borders cause wrong alignment with Bootstrap 3
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing borders cause wrong alignment with Bootstrap 3
    text
    copied!<p>I'm having a problem with Bootstrap. Look at the image below for red lines.</p> <p><img src="https://i.imgur.com/pohvCGL.png" alt="" /></p> <p><code>Jumbotron</code> is aligned little on right. It fits with image divs on header area. However, <code>borders</code> cause header area to look like they're wrongly margined. Correct look would be around -20px from left, and -20px from right, to fit on line with below.</p> <p>I've tried many things but couldn't solve the issue.</p> <p>How can I make it so the borders will correctly align with below? If using borders isn't a good idea, how can I replicate this by using other html/css tags?</p> <p>Source: <strong>using Bootstrap 3</strong></p> <pre><code>&lt;div class="container"&gt; &lt;div class="row"&gt; @for($i = 0; $i &lt; 3; $i++) &lt;div class="col-xs-12 col-sm-4 col-lg-4 header-news-section"&gt; &lt;img src="{{ URL::to('TEST/haber.jpg') }}"class="img-rounded header-news-section-image pull-left" alt="Haber"&gt; &lt;a href="#"&gt; {{ $a = rand(0, 99) }} @for($y = 0; $y &lt;= $a; $y++) {{ $y }} @endfor &lt;/a&gt; &lt;/div&gt; @endfor &lt;/div&gt; &lt;/div&gt; &lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class="col-xs-12 col-sm-9"&gt; &lt;div class="jumbotron"&gt; &lt;h1&gt;Hello, world!&lt;/h1&gt; ........ .header-news-section { min-height: 60px; border-color: #EEEEEE #CCCCCC #CCCCCC #EEEEEE; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 1px; margin-left: 0px; margin-bottom: 10px; margin-top: -5px; } .header-news-section a { display: block; } img.header-news-section-image { height: 60px; width: auto; padding-right: 10px; padding-bottom: 5px; padding-top: 5px; } </code></pre> <p><strong>Edit:</strong> I've solved it by doing <code>&lt;div class="row" style="margin: 0px 0px 0px 0px;"&gt;</code>. Anyone knows why is it being caused in first place?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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