Extending Bootstrap 4 SCSS Libraries — Grid System
Playing with Bootstrap is super fun. Easy to understand and extend with other projects with well documented libraries, I suggest that you should use it in your project.
Overview
Front-end component library has become most important and vital parts in web development. One of the popular and most favorites frameworks by web developers is Bootstrap. For the records if you are using Bootstrap as your front-end framework, they shipped mostly with their entire source codes, from the Jekyll source to the SCSS source codes if you download directly from their Repository.
If you new to SCSS, you can read my other story about how to setup a HTML and SCSS projects in Visual Studio Code or you can fire up your own SCSS Project using Gulp.
If you already use SCSS for your frontend development and you often use Bootstrap, it’s a good thing that you should include Bootstrap SCSS library as well. Bootstrap has almost all the front-end development library needs such as responsive grid system, navigations, modals, buttons, carousel, cards and others with well documented.
Bootstrap SCSS source codes has many library that you can extend for use in your own projects. You can includes the grid system only on your SCSS library or you can include all the library. Here are the setup on extending the grid system project. Project directories structure :
— project_root/
— — scss/
— — — vendors/
— — — — bootstrap/
— — — — — _functions.scss
— — — — — bootstrap-grid.scss
— — — — — bootstrap-reboot.scss
— — — — — bootstrap.scss
— — — — default.scss
— — src/
— — — assets/
— — — — css/
— — — — — default.css
— — — index.html
Code samples on extending bootstrap to your project in SCSS default.scss :
// import bootstrap scss on top of your default scss
// To use only grid and reboot / reset library
//@import 'bootstrap/_functions';
//@import 'bootstrap/bootstrap-grid';
//@import 'bootstrap/bootstrap-reboot';// To use all libraries
@import 'bootstrap/bootstrap';// your custom scss classes
.box {
// extending bootstrap container
@include make-container();
// other custom properties ...
// add container wrapper
&-stack {
// extending bootstrap row
@include make-row();
&-wide {
// extending default bootstrap column ready width 100%
@include make-col-ready();
// other properties
border:1px solid darken($warning,10%);
background-color:$success;
padding:3rem;
}
}
}
The .box now inherit the bootstrap .container class and .box-stack inherit the bootstrap .row class. How to use the extended mix with Bootstrap grid classes on your HTML :
<h1 class="font-weight-light">Default Responsive Column</h1>
<div class="box">
<div class="box-stack">
<div class="box-stack-wide col-lg-6">
Lorem ipsum dolor sit amet consecteteur
<b class="d-block">.box-stack-wide .col-lg-6</b>
</div>
<div class="box-stack-wide col-lg-6">
Lorem ipsum dolor sit amet consecteteur
<b class="d-block">.box-stack-wide .col-lg-6</b>
</div>
</div>
</div>
992px up
Or with specifying the column responsive mixin sizes in our css so we do not need to use the .container ,.row , .col-lg-* or .col-lg-6 class on the HTML tags:
// import bootstrap scss on top of your default scss
// To use only grid and reboot / reset library
//@import 'bootstrap/_functions';
//@import 'bootstrap/bootstrap-grid';
//@import 'bootstrap/bootstrap-reboot';// To use all libraries
@import 'bootstrap/bootstrap';// your custom scss classes
.box {
// extending bootstrap container
@include make-container();
// other custom properties ...
// add container wrapper
&-stack {
// extending bootstrap row
@include make-row();
&-fixed {
// extending default bootstrap column ready width 100%
@include make-col-ready();
// other properties
border:1px solid darken($warning,10%);
background-color:$success;
padding:3rem;
// on devices screen
@include media-breakpoint-up(sm) {
@include make-col(12);
}
// on desktop screen
@include media-breakpoint-up(lg) {
@include make-col(6);
}
}
}
}
Using the extended fixed grid classes on your HTML :
<h1 class="font-weight-light">Default Responsive Column</h1>
<div class="box">
<div class="box-stack">
<div class="box-stack-fixed">
Lorem ipsum dolor sit amet consecteteur column row one
<b class="d-block">.box-stack-fixed</b>
</div>
<div class="box-stack-fixed">
Lorem ipsum dolor sit amet consecteteur column row two
<b class="d-block">.box-stack-fixed</b>
</div>
</div>
</div>Now the new .box-stack-fixed class has the same effects with previous class the we define above with the .box-stack-wide .col-lg-6 classes.
992px and upSame effect goes to mobile size screen resolutions with specified columns.
From the classes above I prefer to use the .box-stack-wide .col-lg-6 classes, unless there are exception for the projects. The reason was simple, because it much easier to change the .col- sizes for the width column sizes and other people might easier to understand too if they want to change the sizes. Because after all, the .col- classes was the default universal bootstrap responsive column size library.
<div class="box">
<div class="box-stack">
<div class="box-stack-wide col-lg-3">
Lorem ipsum dolor sit amet consecteteur column row one
<b class="d-block">.box-stack-wide .col-lg-3</b>
</div>
<div class="box-stack-wide col-lg-3">
Lorem ipsum dolor sit amet consecteteur column row two
<b class="d-block">.box-stack-wide .col-lg-3</b>
</div>
<div class="box-stack-wide col-lg-3">
Lorem ipsum dolor sit amet consecteteur column row three
<b class="d-block">.box-stack-wide .col-lg-3</b>
</div>
<div class="box-stack-wide col-lg-3">
Lorem ipsum dolor sit amet consecteteur column row four
<b class="d-block">.box-stack-wide .col-lg-3</b>
</div>
<div class="box-stack-wide col-lg-10">
Lorem ipsum dolor sit amet consecteteur column row one
<b class="d-block">.box-stack-wide .col-lg-10</b>
</div>
<div class="box-stack-wide col-lg-2">
Lorem ipsum dolor sit amet consecteteur column row two
<b class="d-block">.box-stack-wide .col-lg-2</b>
</div>
<div class="box-stack-fixed">
Lorem ipsum dolor sit amet consecteteur column row one
</div>
<div class="box-stack-fixed">
Lorem ipsum dolor sit amet consecteteur column row two
</div>
</div>
</div>The compiled result on assets/css/default.css file on extending bootstrap responsive grid system:
.box {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.box-stack {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.box-stack-wide {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
background-color: #ffc107;
border: 1px solid #a07800;
padding: 3rem;
}
.box-stack-fixed {
background-color: #ffc107;
border: 1px solid #a07800;
padding: 3rem;
}
@media (min-width: 576px) {
.box-stack-fixed {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 992px) {
.box-stack-fixed {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}See the code in here and you can see the live example here.
There are still many components and many ways that you can extend on the libraries inside the Bootstrap SCSS. Grid System was just one example. You can use and experiments on your project to get the feel and understand how bootstrap works.
This is one of my series about SCSS and Bootstrap. Thank you for reading and happy extending!
References :
https://getbootstrap.com/
https://code.visualstudio.com/
