Bootstrap 4 Tutorial

Breadcrumb provides the hierarchical navigation of a webpage. If the webpage resides deep down the hierarchy, breadcrumb helps in navigation. This will be most useful for the websites having large number of webpages. It indictes the cuurent location of a webpage. Home Folder 1 Folder 2 <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Folder 1</a></li> <li><a href="#">Folder 2</a></li> </ol> In above example, Folder 1 resides inside Home directory and Folder 2 resides inside Folder 1. We need to add .breadcrumb class to the ol HTML tag. Seperators will be automatically added by CSS through ::before and content as shown below. .breadcrumb > li + li:before { color:#CCCCCC; content:"/ "; padding:05px; }

Progress on any task keeps a vital role. The bar graph which shows the completion percentage got the name progress bar. The default HTML 5 progress bar is very simple both in look and the information it provides. It makes users to add CSS and JavaScript as per the requirement. Bootstrap progress bar overcomes the addition of CSS and JavaScript with its inbuilt beauty and maturity. Default bootstrap progress bar Default HTML5 progress bar looks as shown below 0% 25% 50% 75% 100% <progress class="progress" value="0" max="100">0%</progress> <progress class="progress" value="25" max="100">25%</progress> <progress class="progress" value="50" max="100">50%</progress> <progress class="progress" value="75" max="100">75%</progress> <progress class="progress" value="100" max="100...

This article covers 3 sections namely Responsive Images Images Shapes can be changed with built in classes Alignment of images Responsive Images img-fluid class needs to be added in bootstrap version 4 and img-responsive in bootstrap version 3. This make the images to align with the parent element of a webpage by setting the max-width:100% and height:auto repectively. Additionally display:block is applied in bootstrap version 3. Image Shapes can be changed with built in classes Bootstrap support 3 different shapes for an images namely rounded, circle and thumbnail Built in classes .img-rounded , .img-circle and .img-thumbnail can be used to change the shape of an image with rounded corners, circular and to thumbnail view as shown below. Alignment of images Image will get aligned to left with .pull-xs-left class and to right with .pull-xs-right class. Centering of image can be done with .center-block class.

Creating a form in HTML 5 and styling it with CSS manually is a tedious process. Bootstrap form simplifies this task with its own styles and layouts. It supports several form controls with its predefined classes for textual inputs, select menus, text ares, file inputs, check boxes and radio buttons. Note: All inputs must have a type attribute as mandatory, since bootstrap utilizes the HTML5 doctype. Vertically aligned form controls Bootstrap by default, sets the  display:block  and  width:100%  which causes the form elements to stack vertically. Email address We'll never share your email with anyone else. Password Submit <form> <fieldset class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> <small class="text-muted...