{"id":3671,"date":"2015-03-26T14:00:25","date_gmt":"2015-03-26T14:00:25","guid":{"rendered":"\/\/?p=3671"},"modified":"2023-03-20T09:58:52","modified_gmt":"2023-03-20T09:58:52","slug":"customize-bootstrap-grid-with-sass","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/customize-bootstrap-grid-with-sass.html","title":{"rendered":"How to Customize Bootstrap Grid with Sass"},"content":{"rendered":"<p><img decoding=\"async\" class=\"aligncenter wp-image-3685 size-full\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/639x296_04.png\" alt=\"Bootstrap_sass\" width=\"639\" height=\"296\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/639x296_04.png 639w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/639x296_04-300x139.png 300w\" sizes=\"(max-width: 639px) 100vw, 639px\" \/><\/p>\n<p>The Bootstrap grid system is incredibly popular and it&#8217;s been discussed in many tutorials and articles. Today, I will show you how to take advantage of its basic features and modify it using site customizer and Sass variables.<\/p>\n<p>The Bootstrap grid allows <strong>12<\/strong> columns with <strong>30 px<\/strong> wide gutters by default, but these numbers can be adjusted. Just check the Grid System block on the <a href=\"https:\/\/getbootstrap.com\/customize\/\" target=\"_blank\" rel=\"noopener\">Customize<\/a> page. The @grid-columns field allows to set a different number of columns, and the @grid-gutter-width field lets you change the gutter width. <script src=\"https:\/\/p2himages.s3.amazonaws.com\/2.01\/highlight.pack.js\"><\/script> <script>\/\/ <![CDATA[\nhljs.configure({languages: ['css', 'scss']});<br \/>\nhljs.initHighlightingOnLoad();<br \/>\n\/\/ ]]><\/script><\/p>\n<p>Customizers are convenient when bootstrap.css is the only file you need and when you don\u2019t work with preprocessors. It\u2019s better to download the Sass-version of the framework to modify default Bootstrap styles using Sass. No doubt, it\u2019s much better to have a file with all the Bootstrap variables you&#8217;d like to change rather than go to the website, open the customizer, type the required values, and save the bootstrap.css file again.<\/p>\n<p><a href=\"https:\/\/getdevdone.com\/wordpress-development-services.html\"><img decoding=\"async\" class=\"aligncenter wp-image-9064 size-full\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2020\/12\/22225012\/wordpress-development.jpg\" alt=\"Best WordPress Development Services\" width=\"240\" height=\"400\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2020\/12\/22225012\/wordpress-development.jpg 240w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2020\/12\/22225012\/wordpress-development-180x300.jpg 180w\" sizes=\"(max-width: 240px) 100vw, 240px\" \/><\/a><\/p>\n<h3>Main Bootstrap Grid Features<\/h3>\n<p>The Bootstrap grid contains four sizes (Large, Medium, Small, and Extra Small Grids) for four different viewports. Each size has its own prefix:<\/p>\n<table>\n<thead>\n<tr>\n<th>size<\/th>\n<th>prefix<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Extra small devices Phones (&lt;768px)<\/td>\n<td><code>.col-xs-<\/code><\/td>\n<\/tr>\n<tr>\n<td>Small devices Tablets (=768px)<\/td>\n<td><code>.col-sm-<\/code><\/td>\n<\/tr>\n<tr>\n<td>Medium devices Desktops (=992px)<\/td>\n<td><code>.col-md-<\/code><\/td>\n<\/tr>\n<tr>\n<td>Large devices Desktops (=1200px)<\/td>\n<td><code>.col-lg-<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Each size has its own viewport and container width. Here\u2019s a table with basic values:<\/p>\n<table class=\"data\">\n<tbody>\n<tr>\n<th>Features<br \/>\n<span class=\"device\">Bootstrap 3 Grid System<\/span><\/th>\n<th>Extra small devices<br \/>\n<span class=\"device\">Phones (&lt;768px)<\/span><\/th>\n<th>Small devices<br \/>\n<span class=\"device\">Tablets (=768px)<\/span><\/th>\n<th>Medium devices<br \/>\n<span class=\"device\">Desktops (=992px)<\/span><\/th>\n<th>Large devices<br \/>\n<span class=\"device\">Desktops (=1200px)<\/span><\/th>\n<\/tr>\n<tr>\n<td>Max container width<\/td>\n<td>None (auto)<\/td>\n<td><code>750px<\/code><\/td>\n<td><code>970px<\/code><\/td>\n<td><code>1170px<\/code><\/td>\n<\/tr>\n<tr>\n<td>Class prefix<\/td>\n<td><code>.col-xs-<\/code><\/td>\n<td><code>.col-sm-<\/code><\/td>\n<td><code>.col-md-<\/code><\/td>\n<td><code>.col-lg-<\/code><\/td>\n<\/tr>\n<tr>\n<td>Max column width<\/td>\n<td><code>Auto<\/code><\/td>\n<td><code>~62px<\/code><\/td>\n<td><code>~81px<\/code><\/td>\n<td><code>~97px<\/code><\/td>\n<\/tr>\n<tr>\n<td>Gutter width<\/td>\n<td colspan=\"4\"><code>30px<\/code> (15px on each side of a column)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>To change them, you can either use the website customizer or change corresponding Sass variables in the <code>_variables.scss<\/code> file.<\/p>\n<table>\n<thead>\n<tr>\n<th>variable<\/th>\n<th>value by default (px)<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>$screen-xs:<\/td>\n<td>480px<\/td>\n<\/tr>\n<tr>\n<td>$screen-sm:<\/td>\n<td>768px<\/td>\n<\/tr>\n<tr>\n<td>$screen-md:<\/td>\n<td>992px<\/td>\n<\/tr>\n<tr>\n<td>$screen-lg:<\/td>\n<td>1200px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>I prefer the Sass-version. Editing the <code>_variables.scss<\/code> file is very easy and convenient. It contains some nice comments to help you easily find the required parameters.<\/p>\n<pre><code class=\"scss\">\/\/ Extra small screen \/ phone\n$screen-xs:                  480px !default;\n$screen-xs-min:              $screen-xs !default;\n$screen-phone:               $screen-xs-min !default;\n  \n\/\/ Small screen \/ tablet\n$screen-sm:                  768px !default;\n$screen-sm-min:              $screen-sm !default;\n$screen-tablet:              $screen-sm-min !default;\n  \n\/\/ Medium screen \/ desktop\n$screen-md:                  992px !default;\n$screen-md-min:              $screen-md !default;\n$screen-desktop:             $screen-md-min !default;\n  \n\/\/ Large screen \/ wide desktop\n$screen-lg:                  1200px !default;\n$screen-lg-min:              $screen-lg !default;\n$screen-lg-desktop:          $screen-lg-min !default;<\/code><\/pre>\n<p>You can customize the parent container width using these variables:<\/p>\n<table>\n<thead>\n<tr>\n<th>variable<\/th>\n<th>value by default<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>$container-tablet:<\/td>\n<td>(720px + $grid-gutter-width)<\/td>\n<\/tr>\n<tr>\n<td>$container-desktop:<\/td>\n<td>(940px + $grid-gutter-width)<\/td>\n<\/tr>\n<tr>\n<td>$container-large-desktop:<\/td>\n<td>(1140px + $grid-gutter-width)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The main container width includes the container width value and the grid gutter width value. In a mobile viewport, the main container width takes the whole width of the viewport, excluding the @grid-gutter-width value.<\/p>\n<h3>See the Difference<\/h3>\n<p>Let\u2019s create a simple grid containing two columns (one column takes one third of a parent container width designed for a desktop viewport, and the other takes two thirds). You\u2019ll need grid classes with <code>-md<\/code> prefix here.<\/p>\n<p>Since one column takes 1\/12 of the total width (or 8.33%) and is called <code>.col-md-1<\/code>,and since you need values of 1\/3 = 4\/12 and 2\/3 = 8\/12 correspondingly, use the <code>.col-md-4<\/code> class for the sidebar and the <code>.col-md-8<\/code> class for the main content. The code will look like this:<\/p>\n<pre><code class=\"hljs cs\">&lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;\n  &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"row\"<\/span>&gt;\n    &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"col-md-4\"<\/span>&gt;Sidebar content&lt;\/div&gt;\n    &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"col-md-8\"<\/span>&gt;Article content&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Now you have a container with two elements: a sidebar with the width of 33.33% and a main content area with the width of 66.66% (1\/3 and 2\/3).<\/p>\n<p>If you want the columns to take half (50%) of the total width on tablets, you have to add classes with the <code>-sm<\/code> prefix to your code (<code>.col-sm-6<\/code>). The result will look like this:<\/p>\n<pre><code class=\"hljs cs\">&lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;\n  &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"row\"<\/span>&gt;\n    &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"col-md-4 col-sm-6\"<\/span>&gt;Sidebar content&lt;\/div&gt;\n    &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"col-md-8 col-sm-6\"<\/span>&gt;Article content&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>And if you want the columns to take the whole width (100%) on mobile devices, use the class with <code>-xs<\/code> prefix (<code>.col-xs-12<\/code>):<\/p>\n<pre><code class=\"hljs cs\">&lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;\n  &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"row\"<\/span>&gt;\n    &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"col-md-4 col-sm-6 col-xs-12\"<\/span>&gt;Sidebar content&lt;\/div&gt;\n    &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"col-md-8 col-sm-6 col-xs-12\"<\/span>&gt;Article content&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>As you can see, the code is quite simple but it contains too many classes and the names are non-semantic. Here\u2019s how you can get the same effect but with a better HTML code:<\/p>\n<pre><code class=\"hljs cs\">&lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;\n  &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"main\"<\/span>&gt;\n    &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"sidebar\"<\/span>&gt;Sidebar content&lt;\/div&gt;\n    &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"content\"<\/span>&gt;Article content&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Now let\u2019s add some Sass code:<\/p>\n<pre><code class=\"hljs coffeescript\">.main {\n  <span class=\"hljs-property\">@include<\/span> make-row;\n\n  .sidebar {\n    <span class=\"hljs-property\">@include<\/span> make-xs-column(<span class=\"hljs-number\">12<\/span>);\n    <span class=\"hljs-property\">@include<\/span> make-sm-column(<span class=\"hljs-number\">6<\/span>);\n    <span class=\"hljs-property\">@include<\/span> make-md-column(<span class=\"hljs-number\">4<\/span>);\n  }\n\n  .content {\n    <span class=\"hljs-property\">@include<\/span> make-xs-column(<span class=\"hljs-number\">12<\/span>);\n    <span class=\"hljs-property\">@include<\/span> make-sm-column(<span class=\"hljs-number\">6<\/span>);\n    <span class=\"hljs-property\">@include<\/span> make-md-column(<span class=\"hljs-number\">8<\/span>);\n  }\n}<\/code><\/pre>\n<p>That&#8217;s much simpler and better, isn&#8217;t it?<\/p>\n<h3>Column Positioning<\/h3>\n<p>Now, what if the sidebar has to be placed after the main content in the HTML code, but also be displayed before the main content in the browser on the left? Just add two classes: <code>.col-md-pull-8<\/code> to shift the sidebar eight positions left, and <code>.col-md-push-4<\/code> to move the main content four positions right. This should also work for desktops.<\/p>\n<pre><code class=\"hljs cs\">&lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;\n  &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"row\"<\/span>&gt;\n    &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"col-md-8 col-sm-6 col-xs-12 col-md-push-4\"<\/span>&gt;Article content&lt;\/div&gt;\n    &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"col-md-4 col-sm-6 col-xs-12 col-md-pull-8\"<\/span>&gt;Sidebar content&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Here\u2019s how you can do this using Sass and two mixins (<code>make-**-column-pull<\/code> and <code>make-**-column-push<\/code>).<\/p>\n<p><strong>HTML:<\/strong><\/p>\n<pre><code class=\"hljs cs\">&lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;\n  &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"main\"<\/span>&gt;\n    &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"content\"<\/span>&gt;Article content&lt;\/div&gt;\n    &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"sidebar\"<\/span>&gt;Sidebar content&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p><strong>SCSS:<\/strong><\/p>\n<pre><code class=\"hljs perl\">.main {\n  <span class=\"hljs-variable\">@include<\/span> make-row;\n\n  .sidebar {\n    <span class=\"hljs-variable\">@include<\/span> make-md-column-pull(<span class=\"hljs-number\">8<\/span>);\n\n    <span class=\"hljs-variable\">@include<\/span> make-xs-column(<span class=\"hljs-number\">12<\/span>);\n    <span class=\"hljs-variable\">@include<\/span> make-sm-column(<span class=\"hljs-number\">6<\/span>);\n    <span class=\"hljs-variable\">@include<\/span> make-md-column(<span class=\"hljs-number\">4<\/span>);\n  }\n\n  .content {\n    <span class=\"hljs-variable\">@include<\/span> make-md-column-<span class=\"hljs-keyword\">push<\/span>(<span class=\"hljs-number\">4<\/span>);\n\n    <span class=\"hljs-variable\">@include<\/span> make-xs-column(<span class=\"hljs-number\">12<\/span>);\n    <span class=\"hljs-variable\">@include<\/span> make-sm-column(<span class=\"hljs-number\">6<\/span>);\n    <span class=\"hljs-variable\">@include<\/span> make-md-column(<span class=\"hljs-number\">8<\/span>);\n\n  }\n}<\/code><\/pre>\n<h3>Offsets for Columns<\/h3>\n<p>The previous method positioned columns using <code>left<\/code> and <code>right<\/code> and didn\u2019t affect nearby columns. You can shift columns using <code>margin left<\/code>. You will need <code>.col-**-offset-*<\/code> classes. Let\u2019s take a look at a simple example where two columns should have a width of 33% and the second column should also have an offset for the same width.<\/p>\n<pre><code class=\"hljs cs\">&lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"row\"<\/span>&gt;\n  &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"col-md-4\"<\/span>&gt;Column&lt;\/div&gt;\n  &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"col-md-4 col-md-offset-4\"<\/span>&gt;Column&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Here\u2019s the same sample written with Sass:<\/p>\n<p><strong>HTML:<\/strong><\/p>\n<pre><code class=\"hljs cs\">&lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"main\"<\/span>&gt;\n  &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"col\"<\/span>&gt;Column&lt;\/div&gt;\n  &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"col\"<\/span>&gt;Column&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p><strong>Sass:<\/strong><\/p>\n<pre><code class=\"hljs ruby\">.main {\n  <span class=\"hljs-variable\">@include<\/span> make-row;\n  .col {\n    <span class=\"hljs-variable\">@include<\/span> make-md-column(<span class=\"hljs-number\">4<\/span>);\n    &amp;<span class=\"hljs-symbol\">:nth-child<\/span>(<span class=\"hljs-number\">2<\/span>) {\n      <span class=\"hljs-variable\">@include<\/span> make-md-column-offset(<span class=\"hljs-number\">4<\/span>);\n    }\n  }\n}<\/code><\/pre>\n<h3>Simple Sass Trick<\/h3>\n<p>Imagine you need a responsive list of products where product items have a width of 50% on mobile devices and 33% on tablets and desktops. Nobody wants to write long pieces of code, so let&#8217;s take the clean HMTL and add some Bootstrap to the CSS.<\/p>\n<p><strong>HTML:<\/strong><\/p>\n<pre><code class=\"hljs xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">ul<\/span> <span class=\"hljs-attribute\">class<\/span>=<span class=\"hljs-value\">\"items\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div<\/span> <span class=\"hljs-attribute\">class<\/span>=<span class=\"hljs-value\">\"panel\"<\/span>&gt;<\/span>item 1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">div<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">li<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div<\/span> <span class=\"hljs-attribute\">class<\/span>=<span class=\"hljs-value\">\"panel\"<\/span>&gt;<\/span>item 2<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">div<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">li<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div<\/span> <span class=\"hljs-attribute\">class<\/span>=<span class=\"hljs-value\">\"panel\"<\/span>&gt;<\/span>item 3<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">div<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">li<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div<\/span> <span class=\"hljs-attribute\">class<\/span>=<span class=\"hljs-value\">\"panel\"<\/span>&gt;<\/span>item 4<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">div<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">li<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div<\/span> <span class=\"hljs-attribute\">class<\/span>=<span class=\"hljs-value\">\"panel\"<\/span>&gt;<\/span>item 5<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">div<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">li<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div<\/span> <span class=\"hljs-attribute\">class<\/span>=<span class=\"hljs-value\">\"panel\"<\/span>&gt;<\/span>item 6<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">div<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">li<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">ul<\/span>&gt;<\/span><\/code><\/pre>\n<p><strong>Sass:<\/strong><\/p>\n<pre><\/pre>\n<p>This method has some issues, though. You\u2019ll get the following error if different products have different heights:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-3690 size-full\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/203568328.png\" alt=\"2\" width=\"776\" height=\"344\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/203568328.png 776w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/203568328-300x133.png 300w\" sizes=\"(max-width: 776px) 100vw, 776px\" \/><\/p>\n<p>The fourth product runs into the large second product because of its height. This can be solved by setting a <code>display: inline-block;<\/code> property to these items and cancelling <code>float: left;<\/code>.<\/p>\n<p><strong>Sass:<\/strong><\/p>\n<pre><code class=\"hljs java\">.items {\n  list-style: none;\n  padding: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-annotation\">@include<\/span> make-row;\n\n  li {\n    <span class=\"hljs-annotation\">@include<\/span> make-xs-column(<span class=\"hljs-number\">6<\/span>);\n    <span class=\"hljs-annotation\">@include<\/span> make-sm-column(<span class=\"hljs-number\">4<\/span>);\n    display: inline-block;\n    vertical-align: top;\n    <span class=\"hljs-keyword\">float<\/span>: none !important;\n  }\n\n  .panel {\n    padding: <span class=\"hljs-number\">20<\/span>px;\n  }\n}<\/code><\/pre>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-3691 size-full\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/203876015.png\" alt=\"3\" width=\"767\" height=\"381\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/203876015.png 767w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/203876015-300x149.png 300w\" sizes=\"(max-width: 767px) 100vw, 767px\" \/><\/p>\n<p>Because of the <code>inline-block<\/code>, blocks now have additional spacing between them and they do not fit into the width of their parent element. To fix this problem, consolidate the opening and closing tags of the list <code>&lt;\/li&gt;&lt;li&gt;<\/code>:<\/p>\n<p><strong>HTML:<\/strong><\/p>\n<pre><code class=\"hljs xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">ul<\/span> <span class=\"hljs-attribute\">class<\/span>=<span class=\"hljs-value\">\"items\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div<\/span> <span class=\"hljs-attribute\">class<\/span>=<span class=\"hljs-value\">\"panel\"<\/span>&gt;<\/span>item 1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div<\/span> <span class=\"hljs-attribute\">class<\/span>=<span class=\"hljs-value\">\"panel\"<\/span>&gt;<\/span>item 2 long (Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium?)<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div<\/span> <span class=\"hljs-attribute\">class<\/span>=<span class=\"hljs-value\">\"panel\"<\/span>&gt;<\/span>item 3<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div<\/span> <span class=\"hljs-attribute\">class<\/span>=<span class=\"hljs-value\">\"panel\"<\/span>&gt;<\/span>item 4<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div<\/span> <span class=\"hljs-attribute\">class<\/span>=<span class=\"hljs-value\">\"panel\"<\/span>&gt;<\/span>item 5<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div<\/span> <span class=\"hljs-attribute\">class<\/span>=<span class=\"hljs-value\">\"panel\"<\/span>&gt;<\/span>item 6<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">div<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">li<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">ul<\/span>&gt;<\/span><\/code><\/pre>\n<p>The result will look like this on tablets:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-3693 size-full\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/204110093.png\" alt=\"4\" width=\"767\" height=\"284\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/204110093.png 767w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/204110093-300x111.png 300w\" sizes=\"(max-width: 767px) 100vw, 767px\" \/><\/p>\n<p>and mobile devices:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-3694 size-full\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/5.png\" alt=\"5\" width=\"361\" height=\"480\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/5.png 361w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/5-226x300.png 226w\" sizes=\"(max-width: 361px) 100vw, 361px\" \/><\/p>\n<p>Now you have a simple, responsive list of items with a minimum of HTML and Sass code. Easy, huh?<\/p>\n<p class=\"sassmeister\" data-gist-id=\"36833f40226da0c5108e\" data-height=\"480\" data-theme=\"tomorrow\"><a href=\"https:\/\/www.sassmeister.com\/gist\/36833f40226da0c5108e\">Play with this gist on SassMeister.<\/a><\/p>\n<p><script src=\"https:\/\/cdn.sassmeister.com\/js\/embed.js\" async=\"\"><\/script><\/p>\n<h3>tariffs Table<\/h3>\n<p>Take this example: you need to create a grid with tariffs, where an Alfa tariff goes as the first item in the code but it is centered in the design.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-3720 size-full\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/top.png\" alt=\"top\" width=\"984\" height=\"585\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/top.png 984w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/top-300x178.png 300w\" sizes=\"(max-width: 984px) 100vw, 984px\" \/><strong>HTML:<\/strong><\/p>\n<pre><code class=\"hljs cs\">&lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"container tariffs\"<\/span>&gt;\n  &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"row\"<\/span>&gt;\n    &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"tariff alfa\"<\/span>&gt;\n      tariff Alfa\n    &lt;\/div&gt;\n    &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"tariff omega\"<\/span>&gt;\n      tariff Omega\n    &lt;\/div&gt;\n    &lt;div <span class=\"hljs-keyword\">class<\/span>=<span class=\"hljs-string\">\"tariff epsilon\"<\/span>&gt;\n      tariff Epsilon\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p><strong>Sass:<\/strong><\/p>\n<pre><code class=\"hljs perl\">.tariffs {\n  .row {\n    <span class=\"hljs-variable\">@include<\/span> make-row;\n  }\n  .tariff {\n    <span class=\"hljs-variable\">@include<\/span> make-xs-column(<span class=\"hljs-number\">12<\/span>);\n    <span class=\"hljs-variable\">@include<\/span> make-sm-column(<span class=\"hljs-number\">4<\/span>);\n    &amp;.alfa {\n      <span class=\"hljs-variable\">@include<\/span> make-sm-column-<span class=\"hljs-keyword\">push<\/span>(<span class=\"hljs-number\">4<\/span>);\n    }\n    &amp;.omega {\n      <span class=\"hljs-variable\">@include<\/span> make-sm-column-pull(<span class=\"hljs-number\">4<\/span>);\n    }\n  }\n}<\/code><\/pre>\n<p>If you need the columns to stick together, you can use the mixins mentioned above with some additional parameters.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-3721 size-full\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/bottom.png\" alt=\"bottom\" width=\"986\" height=\"578\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/bottom.png 986w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/26140025\/bottom-300x176.png 300w\" sizes=\"(max-width: 986px) 100vw, 986px\" \/><\/p>\n<p>Add <code>0<\/code> into the <code>@include make-row(0);<\/code> mixin that removes external side indents. For the columns, insert an additional second parameter <code>0<\/code>: <code>@include make-xs-column(12, 0);<\/code>, <code>@include make-sm-column(4, 0);<\/code> that will remove internal indents in columns. By changing these additional values in mixins, you can change spacing between columns without changing the default value set in <code>@grid-gutter-width<\/code>. <strong>Sass:<\/strong><\/p>\n<pre><code class=\"hljs perl\">.tariffs {\n  .row {\n    <span class=\"hljs-variable\">@include<\/span> make-row(<span class=\"hljs-number\">0<\/span>);\n  }\n  .tariff {\n    <span class=\"hljs-variable\">@include<\/span> make-xs-column(<span class=\"hljs-number\">12<\/span>, <span class=\"hljs-number\">0<\/span>);\n    <span class=\"hljs-variable\">@include<\/span> make-sm-column(<span class=\"hljs-number\">4<\/span>, <span class=\"hljs-number\">0<\/span>);\n    &amp;.alfa {\n      <span class=\"hljs-variable\">@include<\/span> make-sm-column-<span class=\"hljs-keyword\">push<\/span>(<span class=\"hljs-number\">4<\/span>);\n    }\n    &amp;.omega {\n      <span class=\"hljs-variable\">@include<\/span> make-sm-column-pull(<span class=\"hljs-number\">4<\/span>);\n    }\n  }\n}<\/code><\/pre>\n<p>Here&#8217;s what you have:<\/p>\n<p><a href=\"https:\/\/www.sassmeister.com\/gist\/5d183d2179c4f04d9903\">Play with this gist on SassMeister.<\/a><\/p>\n<p><script src=\"https:\/\/cdn.sassmeister.com\/js\/embed.js\" async=\"\"><\/script><\/p>\n<p>I showed how you can customize the grid and gave a few examples of how to adjust the grid to your project using Sass mixins. This method significantly simplifies the code, saves time, and makes it easier to support and update the project in the future. Instead of editing several HTML templates and removing and adding various classes, you just add several values to the files with styles.<\/p>\n<p>If you have any questions or comments, you are more than welcome to share!<\/p>\n<p><strong>About the Author<\/strong><em><strong>:<\/strong> <\/em>Alex is a talented web developer, passionate tutor and geek. He has been coding websites for over 9 years. This has led him to be the R&amp;D analyst at GetDevDone who loves web standards and enjoys experimenting with various technologies.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Bootstrap grid system is a very popular technology used on thousands of websites. While it is flexible in its own right, you can make it even more so by customizing it with Saas. Read this hands-on guide to learn how you can do that.<\/p>\n","protected":false},"author":2,"featured_media":11234,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[750,740],"tags":[779,825],"class_list":["post-3671","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end-development-services","category-tutorial","tag-component-based-frontend","tag-html-css"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"GetDevDone Team","author_link":"https:\/\/getdevdone.com\/blog\/author\/admin-p2h"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/01140257\/illustration-3-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/front-end-development-services\" class=\"advgb-post-tax-term\">Front-end development services<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/tutorial\" class=\"advgb-post-tax-term\">Tutorial<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Front-end development services<\/span>","<span class=\"advgb-post-tax-term\">Tutorial<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/tutorial\" class=\"advgb-post-tax-term\">Component-based frontend<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/tutorial\" class=\"advgb-post-tax-term\">HTML &amp; CSS<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Component-based frontend<\/span>","<span class=\"advgb-post-tax-term\">HTML &amp; CSS<\/span>"]}},"comment_count":"7","relative_dates":{"created":"Posted 11 years ago","modified":"Updated 3 years ago"},"absolute_dates":{"created":"Posted on March 26, 2015","modified":"Updated on March 20, 2023"},"absolute_dates_time":{"created":"Posted on March 26, 2015 2:00 pm","modified":"Updated on March 20, 2023 9:58 am"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/01140257\/illustration-3-400x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/01140257\/illustration-3.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/01140257\/illustration-3.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/01140257\/illustration-3.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/01140257\/illustration-3.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2015\/03\/01140257\/illustration-3.png"},"featured_post_color":"#25bfb3","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/c67d54df2c6849e5b7af3126c36fe55b10f9d6a14b227d14b35af6c027abb195?s=96&d=mm&r=g","author_position":null,"reading_time":"<span class=\"span-reading-time rt-reading-time\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 7<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>","prev_post":{"slug":"5-useful-sass-mixins","name":"5 Useful Sass Mixins"},"next_post":{"slug":"white-space-in-web-design","name":"Why the Best Websites Use White Space"},"related_posts":["the-key-points-to-consider-when-choosing-between-vue-js-and-react-js-for-your-business-project","our-faves-12-pure-css-demos-to-ignite-your-imagination","best-headless-cms-for-react-html"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/3671","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=3671"}],"version-history":[{"count":54,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/3671\/revisions"}],"predecessor-version":[{"id":24623,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/3671\/revisions\/24623"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/11234"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=3671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=3671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=3671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}