In this post I discuss how bootstrap4 will be used to create the web page in less than 15 minutes.
Bootstrap is one of the most powerful front end frameworks for web design and acts as an alternative to traditional CSS .
Bootstrap allows us to design a single page website creation ,which was difficult in older versions of CSS and HTML .But Bootstrap made the life easier of a web developer to complete the task efficiently with less coding overhead.
Start from text to border ,bootstrap allows different options to design the web page more attractive and enables the fast loading of web pages in slow internet connection. The creation of the an HTML is discussed in my post ,please click here.
It generates the code automatically ,only we need to import some files from Bootstrap website. In the following section, I will show step by step implementation of Bootstrap in the web page design.
Following are the features of using Bootstrap in the website design:
- We can quickly create a multi-column layout with predefined classes.
- We can create different types of form layouts.
- We can create different variations of navigation bars.
- We can create components like accordions, modals, etc. without writing any JS code.
- We can easily create dynamic tabs to manage a large amount of content.
- We can easily create tooltips and popovers to show hint text.
- We can easily create a carousel or image slider to showcase your content.
- We can quickly create different types of alert boxes.
- Creating a responsive website is easy .
The advantages of Bootstrap is as follows:
- Saves lot of time of programming for style of the page
- Responsive feature.
- Consistent design.
- Easy to use.
- Open source.
In the following section I will explain step by step details for the incorporation of the basic bootstrap for the web page design.
In this example I demonstrate the bootsarp4 in the webpage.
Before using Bootstrap4 ,we need to install Bootstrap4 or we can include from CDN(Content Development Network)
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>My First Bootstrap Enabled Page</h1> <p> Hello World !!!</p> </div> </body> </html>
Adding the containers
Containers are used to pad the content inside of them, and there are two container classes available: <div class="container"> <h1>My First Bootstrap Page</h1> <p>This is some information</p> </div> The above code illustrates using the container class .
The Typography in Bootstrap4
We will use following tags to represent the font size compared to regular HTML tags.
The <small> tag used to create a lighter, secondary text in any heading .
<mark> is used to highlight the text.
<abbr> tag will dotted border bottom.
<blockquote> is used to quote the blocks of content from another source.
<kbd> tag is used to highlight the keyboard input.
In Addition to above ,it supports more typography options ,which can be seen in :
In the following sections of this post ,I briefly discuss the striking features of Bootstrap , which are not available in other forint end UI framework.
Nav Menus in BootStrap4
We can create a simple horizontal menu by following the simple steps ,
add the .nav class to a <ul> element, followed by .nav-item for each <li> and add the .nav-link class to their links
We can align this center or right or left by doing ,
Add the .justify-content-center class to center the nav, and the .justify-content-end class to right-align the nav.
We can make this as vertical menu , by adding <ul class="nav flex-column"> The following code snippet will create a vertical menu : <div class="container"> <h2>Vertical Nav</h2> <p>Use the .flex-column class to create a vertical nav:</p> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="#">Link1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link2</a> </li> </ul> </div> </body> </html>
The above code creates two links link1 and link2 in vertical display.
We can create a navbar for the above navigation by adding the class,
<nav class=”navbar navbar-expand-sm bg-light”>
We can give different color to this navbar by using the different class.
Bootstrap 4 Carousel
Carousel is one of the striking feature of Bootstrap 4 to create a good looking webpage .It is slideshow ,which is cycled through different elements like images or multimedia content.
The following example shows the creation of carousel: <div id="demo1" class="carousel slide" data-ride="carousel"> <!-- Indicators which shows the number of images slided--> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- The slideshow contains the images --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="i1.jpg" alt="t1"> </div> <div class="carousel-item"> <img src="i2.jpg" alt="t2"> </div> <div class="carousel-item"> <img src="i3.jpg" alt=”t3"> </div> </div> <!-- Left and right controls arrow mark at the ends of slider --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div>
The above code creates a carousel for three images ,it can be directly used in your webpage.
Bootstrap 4 Tables
Bootstrap provides very customised tables ,which are completely unavailable in CSS , In this section I will be discussing different types tables can be created using Bootstrap4.
The .table class adds basic style to the table.
To create a stripped row , we can use
The .table-striped class adds zebra-stripes to a table.
To create bordered table ,
The .table-bordered class adds borders on all sides of the table and cells.
The hover effect can be added by using,
The .table-hover class adds a hover effect (grey background color) on table rows.
We can create a borderless table by using,
The .table-borderless class removes borders from the table.
Contextual classes will be used to color the whole table (<table>), the table rows (<tr>) or table cells (<td>). The more information found at click here
The responsive tables are created using:
The .table-responsive, this class creates a responsive table.
Responsive table means if the number of items in the row increases more than the screen size ,it automatically add the horizontal scrollbar.
Along with this ,we can add small tables and dark color for the header of the table.
Bootstrap provides an easy way to place media objects (like images or videos) together with content. Media objects are often used to display blog comments, tweets .
To create a media object, add the .media class to a container element, and place media content inside a child container with the .media-body class.
I am concluding with this ,But still lot of features are present to discuss ,I will do in next posts, please feel free to share your comments about the post.