How to use border with Bootstrap

Question

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   lt div class  row   gt      lt div class  span12  style  border  2px solid black  gt         lt div class  row  gt            lt div class  span4  gt              1           lt  div gt            lt div class  span4  gt              2           lt  div gt            lt div class  span4  gt              3           lt  div gt         lt  div gt      lt  div gt   lt  div gt

User · Answer

If you need a basic border around you just need to use bootstrap wells   For example the code below     lt div class  well  gt Basic Well lt  div gt

User · Answer

As of Bootstrap 3  you can use Panel classes    lt div class  panel panel-default  gt Surrounded by border lt  div gt   In Bootstrap 4  you can use Border classes    lt div class  border border-secondary  gt Surrounded by border lt  div gt

User · Answer

While it s probably not the correct way to do it  something that I ve found to be a simple workaround is to simply use a box-shadow rather than a border    This doesn t break the grid system  For example  in your case   HTML   lt div class  container  gt       lt div class  row   gt           lt div class  span12  gt               lt div class  row  gt                   lt div class  span4  gt                      1                  lt  div gt                   lt div class  span4  gt                      2                  lt  div gt                   lt div class  span4  gt                      3                  lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    CSS   span12      -moz-box-shadow  0 0 2px black      -webkit-box-shadow  0 0 2px black      box-shadow  0 0 2px black      Fiddle

User · Answer

Depending what size you want your div to be  you could utilize Bootstrap s built-in component thumbnail class  along with  or without  the grid system to create borders around each of your div items   These examples on Bootstrap s website demonstrates the ease-of-use and lack of need for any special additional CSS    lt div class  row  gt       lt div class  col-xs-6 col-md-3  gt           lt a href     class  thumbnail  gt               lt img src       alt       gt           lt  a gt       lt  div gt           lt  div gt    which produces the following div grid items     or add some additional content    lt div class  row  gt     lt div class  col-sm-6 col-md-4  gt       lt div class  thumbnail  gt         lt img src       alt       gt         lt div class  caption  gt           lt h3 gt Thumbnail label lt  h3 gt           lt p gt     lt  p gt           lt p gt               lt a href     class  btn btn-primary  role  button  gt Button lt  a gt               lt a href     class  btn btn-default  role  button  gt Button lt  a gt          lt  p gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    which produces the following div grid items

User · Answer

If you are using Bootstrap 4 and higher try this to put borders around your empty divs use border border-primary here is an example of my code   lt div class  quot row border border-primary quot  gt           lt div class  quot col border border-primary quot  gt logo lt  div gt           lt div class  quot col border border-primary quot  gt navbar lt  div gt       lt  div gt   Here is the link to the border utility in Bootstrap 4  https   getbootstrap com docs 4 2 utilities borders

User · Answer

You can t just add a border to the span because it will break the layout because of the way width is calculate  width   border   padding   width  Since the container is 940px and the span is 940px  adding 2px border  so 4px altogether  will make it look off centered  The work around is to change the width to include the 4px border  original - 4px  or have another div inside that creates the 2px border

User · Answer

What others have mentioned about border vs border box is definitely correct  You can still get this to work without having to create any custom classes though  http   jsfiddle net panchroma yfzdD     HTML     lt div class  container  gt   lt div class  row   gt       lt div class  span12  gt          lt div class  row  gt           lt div class  span4  gt  1  lt  div gt           lt div class  span4  gt  2  lt  div gt           lt div class  span4  gt  3  lt  div gt           lt  div gt  lt  -- end nested row -- gt       lt  div gt  lt  -- end span 12 -- gt    lt  div gt   lt  -- end row -- gt   lt  div gt  lt  -- end container -- gt    CSS     span12  border solid 2px black  background-color grey          Good luck

User · Answer

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

User · Answer

There s a property in CSS called box-sizing  It determines the total width of an element on your page  The default value is content-box  which doesn t include the padding  margin  or border of the element   Hence  if you set a div to have width  500px and 20px padding all around  it will take up 540px on your website  500   20   20    This is what is causing your problem  Bootstrap calculates set widths for things just like the above example  and these things don t have borders  Since Bootstrap fits together like a puzzle  adding a border to one of the sides would yield a total width of 501px  continuing the above example  and break your layout   The easiest way to fix this is to adjust your box-sizing  The value you would use is box-sizing  border-box  This includes the padding and border in your box elements  You can read more about box-sizing here   A problem with this solution is that it only works on IE8   Consequently  if you need deeper IE support you ll need to override the Bootstrap widths to account for your border   To give an example of how to calculate a new width  begin by checking the width that Bootstrap sets on your element  Let s say it s a span6 and has a width of 320px  this is purely hypothetical  the actual width of your span6 will depend on your specific configuration of Bootstrap   If you wanted to add a single border on the right hand side with a 20px padding over there  you d write this CSS in your stylesheet   span6     padding-right  20px    border-right  1px solid  ddd    width  299px       where the new width is calculated by   old width - padding - border

[css] How to use border with Bootstrap

Examples related to css

Examples related to twitter-bootstrap

Examples related to border