Bootstrap 3: How to create a new grid option for 480-767px

I have been working with responsive frameworks for quite a while and without any doubt, Bootstrap is my favorite responsive framework so far. But there are always a few occasions when you need to extend the capability of Bootstrap yourself to meet your special requirements. For example, creating an extra grid for 480-767px. But why would I need this extra grid? As of Bootstrap 3, the smallest grid, Extra Small (class prefix .col-xs- ) extends from 1 to 767 px in width. That is a very large range compared to other grids: Small (class prefix .col-sm- ) extending from 768-991px, Medium (class prefix .col-md- ) extending from 992-1199px and Large (class prefix .col-lg- ) extending beyond 1200px. Now, consider two scenarios:

1. If you want to create more than one columns for Extra Small, they may look great in screen width close to 767px, but when you go below 480px, they look really clumsy.

2. If you use small (e.g. 500px wide) preview images with 100% width that look good in smaller resolution, then they start looking too big and not to mention, pixelated. Again, if you use max-width and center align to adjust for them, the space on both sides ruins the aesthetic value of the design.

Those being said, I once got into a situation where I needed to define an extra grid for 480-767px to avoid adjusting the widths of elements with unnecessary media queries at every step. So, if any of you want this extra Bootstarp grid as well, here is how to achieve this.

Defining the grid structure: First of all, let’s define the grid. Our new grid will be for 480-767px width. We will push the default Bootstrap Extra Small (class prefix .col-xs- ) to support 1-479px instead of 1-767px. Now, to make it easier to remember, we will name the grid as Medium Small, which customizes the Bootstrap grids as Extra Small, Medium Small, Small, Medium, Large.

Writing up the CSS: To make our new column classes similar to other Bootstarp column classes, we will use the class prefix .col-ms- for our new classes. Let’s create a new CSS file in the css directory of your project, name it as bootstrap-480-767-grid.css , and the following code inside it.

Using this CSS: Just add this new CSS file right after you call the Bootstrap CSS in your HTML.

Remember when you are making columns with these new classes, you have to use the classes .col-ms-1 to .col-ms-12 etc. So there you go. You got your new custom grid for Bootstrap. Show me how you used this snippet for your project in the comment section. Good luck!

A few websites that are using this snippet:
Hawksland Associates
Enosis Creative

Advertisements

11 thoughts on “Bootstrap 3: How to create a new grid option for 480-767px

    • That’s a very good finding, Alfred. To be honest, I never had to use pushing, pulling or offsetting at that small viewport. But I’ve updated the gist. Let me know in the comment if it works for you. 🙂

      Like

  1. Is it also possible to NOT show the mobile menu using this new grid?
    When using this new grid in landscape, I’d like to show menu items and not the mobile pulldown menu
    How do I change this behaviour?

    Like

    • Hi thegeekandjock, no, it is not possible with this. The navigation menu in Bootstrap does not use its grids for showing dropdown/inline menu items. You have to write custom media-query CSS based on your requirement.

      I just gave some thought on this. Actually, what you want is very easy with a few lines on CSS. For example, you can use something like the following. But you have to change min-width value in the media-query and do some adjustments based on your design.

      @media (min-width: 480px) and (max-width: 767px) {
        .navbar-header {
          float: left;
        }
        .navbar-toggle {
          display: none !important;
        }
        .navbar-collapse.collapse {
          display: block !important;
        }
        .navbar-nav > li,
        .navbar-nav {
          float: left !important;
        }
        .navbar-nav.navbar-right:last-child {
          margin-right: -15px !important;
        }
        .navbar-right {
          float: right !important;
        }
        .container > .navbar-header {
          margin-right: 15px;
        }
      }
      

      Like

Ask a question or leave a reply!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s