WORKING WITH BOOTSTRAP 4
25th Apr, 2019
In the preceding lesson, we learnt about how you can include bootstrap in your project using either the offline method by downloading it or online method by including it using the cdn links provided by bootstrap. After you have included it your project will be set for working with bootstrap 4.
Working with bootstrap is very easy if you have mastered HTML and some basic CSS. This is because in HTML we studied about attributes and its attributes that you will mainly be used to work with bootstrap. The attributes will be assigned to each HTML tags appropriately and then bootstrap will do every other on making sure that the display is perfect just as you will love it.
In this tutorial on working with bootstrap, we have perfectly discussed the following
1. Html attributes that bootstrap
2. How to assign these HTML attributes
3. Understanding bootstrap
4. Bootstrap Grids.
HTML ATTRIBUTES THAT BOOTSTRAP NEEDS.
There are a lot of HTML attributes that you will come across when creating a web page. These HTML attributes are the attributes that will be linked to bootstrap and when linked very well bootstrap will use it to manipulate the webpage and give it intuitive formatting that will please your users.
Some of the major attributes that bootstrap used to manipulate a web page include the following
· Class
· Id
· Data
· Arial-label, etc.
The lists are many and you can get the full list here
HOW TO ASSIGN HTML ATTRIBUTES TO BE USED BY BOOTSTRAP
Since bootstrap depends on the HTML attributes and tags to work as expected, knowing the perfect way to assign these attributes is very important.
To assign the attribute, follow the following example
<body>
<div class="container">
</div>
</body>
First, write the HTML tag in our example <div>
Secondly, write the HTML attribute you want to use example class
And finally, write equal sign followed by a value of the attribute enclosed in a quotation mark example container
And that with that you have already started using bootstrap in your web site.
UNDERSTANDING BOOTSTRAP
Understanding bootstrap deals with mastering the major formats and components that bootstrap has put out of the box for us to use.
The following are the major out of the major things we need to know about bootstrap
1. Bootstrap menu
The menu is very important in every website for ease of navigation. This component of a web page has easily been taken care of by bootstrap. The code below is a simple example of s menu built with bootstrap and it is easy to integrate with any website project you are building
2. Bootstrap grid
Bootstrap grid is an out of box design to partition a web page to display correctly on a browser ranging from small screen devices such as mobile to large screen readers such as desktop and projectiles.
Bootstrap divides each row into 12 columns. The following commands can be used to specify the width of the columns
• Col : This sets the whole screen regardless of the width into one column. That is 12*1.
• col-lg-4 : It will select 4 columns. Choose any number between 1-12. The ‘lg’ stand for large screen (e.g. large computer screen). This divides a large screen iton 3 columns. That is 4*3.
• col-md-6 : ‘md’ = medium screen. This divides a medium devices into two columns. That is 6*2.
• col-sm-3 : ‘sm’ = small screen. This divides a small devises such as your mobile phones into 4 columns. That is 3*4.
• col-xs-6 : ‘xs’ = extra small screen. This option divides the smallest devices into 2 columns. That is 6*2
• col-lg-offset-4 : skip first 4 columns. Similarly use ‘md’, ‘sm’ and ‘xs’ with offset to achieve the same result.
Example
Below is an example of grid system. Read the content of the Lines 13-16 to understand it.
The resultant webpage is shown in succeeding figure.
Note:
• The columns should be defined inside the class ‘row’. This means that columns div should be wrapped with row div
<div class=”row”> <div class=”col”> <!—code here--> </div> </div>
• Also, sum of the widths of individual columns should not be greater than 12.
• Lastly, if we use ‘col-md-4’ without defining the ‘lg’, ‘sm’ and ‘xs’, then ‘md’ rule will be applicable to higher sized screen ‘lg’, but not on the lower size screen ‘sm’ and ‘xs’. Similarly, if we use ‘sm’ without defining the ‘lg’, ‘md’ and ‘xs’, then rule will be applicable to higher size screen i.e. ‘lg’ and ‘md’ but not on ‘xs’.
<!DOCTYPE html> <html> <head> <title>Bootstrap Tutorial</title> <!-- CSS --> <link href="bootstrap/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="row"> <div class="col-md-2 col-xs-4">col-md-2, col-xs-4</div> <div class="col-md-6 col-xs-4">col-md-6, col-xs-4</div> <div class="col-md-4 col-xs-4">col-md-4, col-xs-4</div> </div> <!-- Javascript --> <!-- put jQuery.js before bootstrap.min.js; and then add custom jquery --> <script src="bootstrap/jquery-3.3.1.min.js"></script> <script src="bootstrap/bootstrap.min.js"></script> </body> </html>
EXAMPLE OF EQUAL COLUMN
Making equal columns is also very easy with bootstrap grid system. All you have to do is just ensure that all the columns have the same number.
<div class="row"> <div class="col-md-4 col-xs-4">col-md-4, col-xs-4</div> <div class="col-md-4 col-xs-4">col-md-4, col-xs-4</div> <div class="col-md-4 col-xs-4">col-md-4, col-xs-4</div> </div>
Nested columns
We can further divide a column into small columns by defining a class ‘row’ inside the ‘column’ as shown in the example below.
<!DOCTYPE html> <html> <head> <title>Bootstrap Tutorial</title> <!-- CSS --> <link href="bootstrap/bootstrap.min.css" rel="stylesheet"> <!-- Add Custom CSS below --> </head> <body> <div class="row"> <div class="col-md-2 col-xs-4">col-md-2, col-xs-4</div> <div class="col-md-6 col-xs-4"> <div class="row"> <div class="col-xs-6">col-xs-6</div> <div class="col-xs-6">col-xs-6</div> </div> </div> <div class="col-md-4 col-xs-4">col-md-4, col-xs-4</div> </div> <!-- Javascript --> <!-- put jQuery.js before bootstrap.min.js; and then add custom jquery --> <script src="bootstrap/jquery-3.3.1.min.js"></script> <script src="bootstrap/bootstrap.min.js"></script> </body> </html> OFFSET COLUMNS We can skip the columns using ‘offset’ as shown in the example below. <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Bootstrap Tutorial</title> 5 6 <!-- CSS --> 7 <link href="bootstrap/bootstrap.min.css" rel="stylesheet"> 8 <!-- Add Custom CSS below --> </head> <body> <div class="row"> <div class="col-md-offset-2 col-md-2">col-md-2</div> <div class="col-md-8">col-md-8</div> </div> <!-- Javascript --> <!-- put jQuery.js before bootstrap.min.js; and then add custom jquery --> <script src="bootstrap/jquery-3.3.1.min.js"></script> <script src="bootstrap/bootstrap.min.js"></script> </body> </html>
Having understood the bootstrap menu and grid system, you are very good to start using bootstrap to achieve any custom design you want.
Also, know that at some certain points you might need to add some custom CSS to get some colour and other necessary designs not included in bootstrap.
To receive weekly newsletter from us signup below, we dont spam, and your information is secure with us
