Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use border with Bootstrap

How can I solve this problem? When you add borders to a div, the div is not centered and the span12 class is not centered.

I would like to center the div with the borders

<div class="row" >    <div class="span12" style="border: 2px solid black">       <div class="row">          <div class="span4">             1          </div>          <div class="span4">             2          </div>          <div class="span4">             3          </div>       </div>    </div> </div> 
like image 445
the_martux Avatar asked Mar 10 '13 22:03

the_martux


People also ask

How do I add a bottom border in Bootstrap?

. border-right : This class adds a border on the right of the element. . border-bottom : This class adds a border on the bottom of the element.

Can you put a border on a div?

You can use: border-style: solid; border-width: thin; border-color: #FFFFFF; You can change these as you see fit, though.

Which Bootstrap 4 class can be used to make a borderless table?

<code>. table-borderless</code> class for a table without borders.


1 Answers

Unfortunately, that's what borders do, they're counted as part of the space an element takes up. Allow me to introduce border's less commonly known cousin: outline. It is virtually identical to border. Only difference is that it behaves more like box-shadow in that it doesn't take up space in your layout and it has to be on all 4 sides of the element.

http://codepen.io/cimmanon/pen/wyktr

.foo {     outline: 1px solid orange; } 
like image 84
cimmanon Avatar answered Sep 17 '22 16:09

cimmanon