![]() Nobody wants to write long pieces of code, so let’s take the clean HMTL and add some Bootstrap to the CSS. 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. & :nth-child( 2) make-md-column-offset( 4) Here’s the same sample written with Sass: Let’s 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. The previous method positioned columns using left and right and didn’t affect nearby columns. content make-md-column- push( make-xs-column( make-sm-column( make-md-column( 8) ![]() sidebar make-md-column-pull( make-xs-column( make-sm-column( make-md-column( 4) Here’s how you can do this using Sass and two mixins ( make-**-column-pull and make-**-column-push). col-md-push-4 to move the main content four positions right. col-md-pull-8 to shift the sidebar eight positions left, and. 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. That’s much simpler and better, isn’t it? Column Positioning content make-xs-column( make-sm-column( make-md-column( 8) sidebar make-xs-column( make-sm-column( make-md-column( 4) Here’s how you can get the same effect but with a better HTML code: col-xs-12): Īs you can see, the code is quite simple but it contains too many classes and the names are non-semantic. The result will look like this: Īnd if you want the columns to take the whole width (100%) on mobile devices, use the class with -xs prefix (. If you want the columns to take half (50%) of the total width on tablets, you have to add classes with the -sm prefix to your code (. 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). The Bootstrap grid contains four sizes (Large, Medium, Small, and Extra Small Grids) for four different viewports. No doubt, it’s much better to have a file with all the Bootstrap variables you’d like to change rather than go to the website, open the customizer, type the required values, and save the bootstrap.css file again. ![]() It’s better to download the Sass-version of the framework to modify default Bootstrap styles using Sass. The field allows to set a different number of columns, and the field lets you change the gutter width.Ĭustomizers are convenient when bootstrap.css is the only file you need and when you don’t work with preprocessors. Just check the Grid System block on the Customize page. The Bootstrap grid allows 12 columns with 30 px wide gutters by default, but these numbers can be adjusted. ![]() Today, I will show you how to take advantage of its basic features and modify it using site customizer and Sass variables. The Bootstrap grid system is incredibly popular and it’s been discussed in many tutorials and articles. ![]()
0 Comments
Leave a Reply. |