Adjusting the top margin of columns in Bootstrap 3 for smaller screens

Question

Adjusting the top margin of columns in Bootstrap 3 for smaller screens

I am working with a row that has the potential for multiple columns.

<div class="container">
        <div class="row">
            <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
            <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
            <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
            <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
            <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
            <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
            <!-- ... and so on ... -->
        </div>
    </div>

Now, I want to apply a margin-top:20px to all small screen size columns and also to big screen columns if there are more than 4 of them, creating two "rows" requiring some spacing in between. Can this be achieved using only CSS?

css twitter-bootstrap twitter-bootstrap-3 media-queries

Answer 1

Answer №1

If you need to adjust the top margin in certain screen sizes, consider using a media query.

@media (max-width: 767px) {
    .col-xs-6 {
        margin-top:20px;
    }
}

Check out this example on Bootply

Just a heads up - it's okay if the total columns in a row exceed 12 in Bootstrap. It will just wrap around. However, excessive nested rows may not be ideal. Learn more at Bootstrap Grid Examples.

Answer 2

If you need to adjust the top margin in certain screen sizes, consider using a media query.

@media (max-width: 767px) {
    .col-xs-6 {
        margin-top:20px;
    }
}

Check out this example on Bootply

Just a heads up - it's okay if the total columns in a row exceed 12 in Bootstrap. It will just wrap around. However, excessive nested rows may not be ideal. Learn more at Bootstrap Grid Examples.

Answer 3

Answer №2

After encountering a similar need, I devised the following solution and am documenting it here for both future readers and my own reference.

$resolutions: (xs: (0px, 767px), sm: (768px, 991px), md: (992px, 1199px), lg: (1200px, 9999px));
$directions: (t: top, r: right, b: bottom, l: left);

@for $r from 1 through 10{
  @each $size-abbr, $size-values in $resolutions{
    @media (min-width: nth($size-values, 1)) and (max-width: nth($size-values, 2)) {
      @each $dir-abbr, $dir-name in $directions{
        $x: $r * 5;
        .m#{$dir-abbr}-#{$size-abbr}-#{$x}{
          margin-#{$dir-name}: #{$x}px;
        }
        .m#{$dir-abbr}-#{$size-abbr}-#{$r}p{
          margin-#{$dir-name}: #{$r}unquote('%');
        }
      }
    }
  }
}

The SASS code provided above generates classes that can be used like this:

@media (min-width: 0px) and (max-width: 767px) {
    .mt-xs-5 { margin-top: 5px; }
    .mt-xs-1p { margin-top: 1%; }
    .mr-xs-5 { margin-right: 5px; }
    .mr-xs-1p { margin-right: 1%; }
    .mb-xs-5 { margin-bottom: 5px; }
    .mb-xs-1p { margin-bottom: 1%; }
    .ml-xs-5 { margin-left: 5px; }
    .ml-xs-1p { margin-left: 1%; } 
}

This allows the content editor to easily apply specific margins to elements based on screen size with classes such as .mt-xs-10 representing margin-top: 10px on an extra-small screen.

I trust this will benefit someone in need of a similar solution.

Answer 4

After encountering a similar need, I devised the following solution and am documenting it here for both future readers and my own reference.

$resolutions: (xs: (0px, 767px), sm: (768px, 991px), md: (992px, 1199px), lg: (1200px, 9999px));
$directions: (t: top, r: right, b: bottom, l: left);

@for $r from 1 through 10{
  @each $size-abbr, $size-values in $resolutions{
    @media (min-width: nth($size-values, 1)) and (max-width: nth($size-values, 2)) {
      @each $dir-abbr, $dir-name in $directions{
        $x: $r * 5;
        .m#{$dir-abbr}-#{$size-abbr}-#{$x}{
          margin-#{$dir-name}: #{$x}px;
        }
        .m#{$dir-abbr}-#{$size-abbr}-#{$r}p{
          margin-#{$dir-name}: #{$r}unquote('%');
        }
      }
    }
  }
}

The SASS code provided above generates classes that can be used like this:

@media (min-width: 0px) and (max-width: 767px) {
    .mt-xs-5 { margin-top: 5px; }
    .mt-xs-1p { margin-top: 1%; }
    .mr-xs-5 { margin-right: 5px; }
    .mr-xs-1p { margin-right: 1%; }
    .mb-xs-5 { margin-bottom: 5px; }
    .mb-xs-1p { margin-bottom: 1%; }
    .ml-xs-5 { margin-left: 5px; }
    .ml-xs-1p { margin-left: 1%; } 
}

This allows the content editor to easily apply specific margins to elements based on screen size with classes such as .mt-xs-10 representing margin-top: 10px on an extra-small screen.

I trust this will benefit someone in need of a similar solution.

Answer 5

Answer №3

Although this post may be dated, I have come up with a more efficient solution below.

[class*="col-"] {
  margin-bottom: 15px;
}

While this code works in certain cases, it can result in unnecessary margins being added where not required. To address this issue, I have devised a new CSS class called .row-grid.

.row.row-grid [class*="col-"] + [class*="col-"] {
  margin-top: 15px;
}

@media (min-width: 1200px) {
  .row.row-grid [class*="col-lg-"] + [class*="col-lg"] {
    margin-top: 0;
  }
}
@media (min-width: 992px) {
  .row.row-grid [class*="col-md-"] + [class*="col-md"] {
    margin-top: 0;
  }
}
@media (min-width: 768px) {
  .row.row-grid [class*="col-sm-"] + [class*="col-sm"] {
    margin-top: 0;
  }
}

Answer 6

Although this post may be dated, I have come up with a more efficient solution below.

[class*="col-"] {
  margin-bottom: 15px;
}

While this code works in certain cases, it can result in unnecessary margins being added where not required. To address this issue, I have devised a new CSS class called .row-grid.

.row.row-grid [class*="col-"] + [class*="col-"] {
  margin-top: 15px;
}

@media (min-width: 1200px) {
  .row.row-grid [class*="col-lg-"] + [class*="col-lg"] {
    margin-top: 0;
  }
}
@media (min-width: 992px) {
  .row.row-grid [class*="col-md-"] + [class*="col-md"] {
    margin-top: 0;
  }
}
@media (min-width: 768px) {
  .row.row-grid [class*="col-sm-"] + [class*="col-sm"] {
    margin-top: 0;
  }
}

Answer 7

Answer №4

Here is a straightforward and neat solution that I frequently use:

.row { margin-top: -15px; }
.row > div { margin-top: 15px; }

This method ensures that each <div class='col-*-*'> will have a 15px margin on the top, with the exception of those in the first row (or, on smaller screens, except for the one at the very top).

Answer 8

Here is a straightforward and neat solution that I frequently use:

.row { margin-top: -15px; }
.row > div { margin-top: 15px; }

This method ensures that each <div class='col-*-*'> will have a 15px margin on the top, with the exception of those in the first row (or, on smaller screens, except for the one at the very top).

Answer 9

Answer №5

This easy fix automatically adds a top margin to all columns except the initial one on small screens. No need for special class names or changes to HTML or CSS. Simply adjust the margin-top value below to suit your needs.

@media (max-width: 767px) {
  [class*="col-"]:not(:first-child) {
    margin-top: 30px;
  }
}

Answer 10

This easy fix automatically adds a top margin to all columns except the initial one on small screens. No need for special class names or changes to HTML or CSS. Simply adjust the margin-top value below to suit your needs.

@media (max-width: 767px) {
  [class*="col-"]:not(:first-child) {
    margin-top: 30px;
  }
}

Adjusting the top margin of columns in Bootstrap 3 for smaller screens

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

issue with IE's (Internet Explorer) filter invert function not functioning

How can you reduce the size of the bootstrap navbar without utilizing less?

"Error message stating 'Unresolved variable' occurs in the code while trying to assign className={styles.nameOfClass

Can a specific CSS rule be written in Material UI using makeStyles that will only apply if the element has both classes together?

Create a smooth scrolling effect for a div with a fixed position

Header on top of table that stays in place with scrolling

Is there a way for me to modify the color of the currently selected button?

Using jQuery to create a script that will transition random images simultaneously within a div

What could be causing the 'margin-top' property not to function as expected?

Ways to create a distinct highlight for the selected link in the navigation upon clicking

Splitting Sub Menu into 2 Columns in Wordpress Twenty Seventeen Theme

How can I horizontally add divs until the width size is exceeded?

Get rid of the white line in the Navbar-toggler when it expands

Can someone explain the functionality of the CSS Selector > * when used inside a Vue.js component?

Easily done! Using JavaScript to generate a blinking cursor on a table

Exclude the footer from the index.html file by configuring it in the docusaurus.config.js file

Issue with Bootstrap side navbar not collapsing when clicked on a link

Adjust the number of columns based on the minimum screen resolution using columnizer

Reduce the height of a single column in Bootstrap

What is the best way to adjust the padding during a scaling transformation?