Twitter Bootstrap - add top space between rows

Question

How to add margin top to class  row  elements using twitter bootstrap framework

User · Answer

My trick  Not so clean  but works well for me   lt p gt  amp nbsp  lt  p gt

User · Answer

Editing or overriding the row in Twitter bootstrap is a bad idea  because this is a core part of the page scaffolding and you will need rows without a top margin     To solve this  instead create a new class  top-buffer  that adds the standard margin that you need    top-buffer   margin-top 20px      And then use it on the row divs where you need a top margin    lt div class  row top-buffer  gt

User · Answer

lt div class  row row-padding  gt    simple code

User · Answer

For Bootstrap 4 spacing should be applied using      shorthand utility classes   in the following format       property  sides - size    Where property is one of    m - for classes that set margin p - for classes that set padding   Where sides is one of    t - for classes that set margin-top or padding-top b - for classes that set margin-bottom or padding-bottom l - for classes that set margin-left or padding-left r - for classes that set margin-right or padding-right x - for classes that set both  -left and  -right y - for classes that set both  -top and  -bottom blank - for classes that set a margin or padding on all 4 sides of the element   Where size is one of    0 - for classes that eliminate the margin or padding by setting it to 0 1 -  by default  for classes that set the margin or padding to  spacer    25 2 -  by default  for classes that set the margin or padding to  spacer    5 3 -  by default  for classes that set the margin or padding to  spacer 4 -  by default  for classes that set the margin or padding to  spacer   1 5 5 -  by default  for classes that set the margin or padding to  spacer   3 auto - for classes that set the margin to auto   So you should be doing any of these    lt div class  row mt-1  gt   lt div class  row mt-2  gt                 lt div class  row mt-5  gt    Read the docs for more explanation  Try live examples over here

User · Answer

Sometimes margin-top can causes design problems   http   www w3 org TR CSS2 box html collapsing-margins  So  i recommend create  margin-bottom classes  instead of  margin-top classes  and apply them to the previous item   If you are using Bootstrap importing LESS Bootstrap files try to define the margin-bottom classes with proportional Bootstrap Theme spaces    margin-bottom-xs  margin-bottom  ceil  line-height-computed   4       margin-bottom-sm  margin-bottom  ceil  line-height-computed   2      margin-bottom-md  margin-bottom   line-height-computed    margin-bottom-lg  margin-bottom  ceil  line-height-computed   2

User · Answer

Add to this class in the  css file    row       margin-left  -20px       zoom  1      margin-top  50px      or make a new class and add it to the element   rowSpecificFormName td       margin-top  50px

User · Answer

You can use the following class for bootstrap 4   mt-0 mt-1 mt-2 mt-3 mt-4      Ref  https   v4-alpha getbootstrap com utilities spacing

User · Answer

Bootstrap3  CSS  gutter only  without margins around     row row-gutter     margin-bottom  -15px    overflow  hidden     row row-gutter  gt    class   col       margin-bottom  15px      CSS  equal margins around  15px 2     row row-margins     padding-top  7px     or margin-top  7px       padding-bottom  7px     or margin-bottom  7px        row row-margins  gt    class   col       margin-top  8px    margin-bottom  8px      Usage    lt div class  row row-gutter  gt       lt div class  col col-sm-9  gt first lt  div gt       lt div class  col col-sm-3  gt second lt  div gt       lt div class  col col-sm-12  gt third lt  div gt   lt  div gt     with SASS or LESS 15px could be a variable from bootstrap

User · Answer

If you re using BootStrap 3 3 7  you can use the open source library bootstrap-spacer via NPM  npm install bootstrap-spacer   or you can visit the github page   https   github com chigozieorunta bootstrap-spacer   Here s an example of how this works to space rows using the  row-spacer class    lt div class  row row-spacer  gt       lt div class  col-md-4  gt       lt  div gt       lt div class  col-md-4  gt       lt  div gt       lt div class  col-md-4  gt       lt  div gt   lt  div gt    lt div class  row row-spacer  gt       lt div class  col-md-4  gt       lt  div gt       lt div class  col-md-4  gt       lt  div gt       lt div class  col-md-4  gt       lt  div gt   lt  div gt    If you d require spaces between columns  you can also add the  row-col-spacer class     lt div class  row row-col-spacer  gt       lt div class  col-md-4  gt       lt  div gt       lt div class  col-md-4  gt       lt  div gt       lt div class  col-md-4  gt       lt  div gt   lt  div gt    And you can also combine various the  row-spacer  amp   row-col-spacer classes together    lt div class  row row-spacer row-col-spacer  gt       lt div class  col-md-4  gt       lt  div gt       lt div class  col-md-4  gt       lt  div gt       lt div class  col-md-4  gt       lt  div gt   lt  div gt

User · Answer

I added these classes to my bootstrap stylesheet   voffset    margin-top  2px     voffset1   margin-top  5px     voffset2   margin-top  10px     voffset3   margin-top  15px     voffset4   margin-top  30px     voffset5   margin-top  40px     voffset6   margin-top  60px     voffset7   margin-top  80px     voffset8   margin-top  100px     voffset9   margin-top  150px      Example   lt div class  container  gt     lt div class  row voffset2  gt       lt div class  col-lg-12  gt         lt p gt          Vertically offset text         lt  p gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

There is a trick for adding margin automatically only for the 2nd  row in the container   container-row-margin  row    row       margin-top  1rem     Adding the  container-row-margin to the container  results in   Complete HTML   lt div class  quot bg-secondary text-white quot  gt      div outside of the container   lt  div gt   lt div class  quot container container-row-margin quot  gt       lt div class  quot row quot  gt           lt div class  quot col col-4 bg-warning quot  gt              Row without top margin          lt  div gt       lt  div gt       lt div class  quot row quot  gt           lt div class  quot col col-4 bg-primary text-white quot  gt              Row with top margin          lt  div gt       lt  div gt       lt div class  quot row quot  gt           lt div class  quot col col-4 bg-primary text-white quot  gt              Row with top margin          lt  div gt       lt  div gt   lt  div gt   lt div class  quot bg-secondary text-white quot  gt      div outside of the container   lt  div gt   Taken from official samples

User · Answer

Bootstrap 3  If you need to separate rows in bootstrap  you can simply use  form-group  This adds 15px  margin to the bottom of row   In your case  to get margin top  you can add this class to previous  row element   lt div class  row form-group  gt      From bootstrap css     form-group           margin-bottom  15px      Bootstrap 4  You can use built-in spacing classes   lt div class  row mt-3  gt  lt  div gt    The  t  in class name makes it apply only to  top  side  there are similar classes for bottom  left  right  The number defines space size

User · Answer

I m using these classes to alter top margin    margin-top-05   margin-top  0 5em     margin-top-10   margin-top  1 0em     margin-top-15   margin-top  1 5em     margin-top-20   margin-top  2 0em     margin-top-25   margin-top  2 5em     margin-top-30   margin-top  3 0em      When I need an element to have 2em spacing from the element above I use it like this    lt div class  row margin-top-20  gt Something here lt  div gt    If you prefere pixels so change the em to px to have it your way

User · Answer

In Bootstrap 4 alpha  you can use this   class margin-bottom-5   The classes are named using the format   property - sides - size

User · Answer

you can add this code      class   col-         padding-top  1rem      padding-bottom  1rem

User · Answer

Bootstrap 4 alpha  for margin-top  shorthand CSS class names mt-1  mt-2   mt-lg-5  mt-sm-2   same for the bottom  right  left  and you have also auto class ml-auto       lt div class  mt-lg-1      gt    Units are from 1 to 5    in the variables scss  which means if you set mt-1 it gives  25rem of margin top     spacers      0        x  0      y  0        1        x    spacer-x    25       y    spacer-y    25         2        x    spacer-x    5       y    spacer-y    5         3        x   spacer-x      y   spacer-y        4        x    spacer-x   1 5       y    spacer-y   1 5         5        x    spacer-x   3       y    spacer-y   3         default    read-more here   https   v4-alpha getbootstrap com utilities spacing  horizontal-centering

User · Answer

Ok just to let you know what s happened then  i fixed using some new classes as Acyra says above    top5   margin-top 5px     top7   margin-top 7px     top10   margin-top 10px     top15   margin-top 15px     top17   margin-top 17px     top30   margin-top 30px      whenever i want i do  lt div class  row top7  gt  lt  div gt   for better responsive you can add margin-top 7  instead of 5px for example  D

User · Answer

Just simply use this bs3-upgrade helper for spacings and text aligment     https   github com studija bs3-upgrade

User · Answer

just take a new class beside every row and apply css of margin-top  20px  here is the code below  lt style gt     small-top           margin-top  25px          lt  style gt       lt div class  row small-top  gt      lt div class  col-md-12  gt      lt  div gt    lt  div gt

User · Answer

If you want to change just on one page  add the following style rule     myCustomDivID  row        margin-top 20px

[css] Twitter Bootstrap - add top space between rows

Examples related to css

Examples related to twitter-bootstrap