Badges are used to add additional information to any content. For example here News 3 numerical indicators refers to number of items associated with the DashBoard link. The .badge class is used with elements to create badges. Bootstrap Badges Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Badges Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link … Read more
Bootstrap provides the facility to group a series of buttons together on a single line in a button group. The .btn-group class is used with div element to create a button group. Bootstrap Button Groups Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Button Groups Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script … Read more
Bootstrap provides the following classes to achieve different styles of buttons. • .btn • .btn-default • .btn-primary • .btn-success • .btn-info • .btn-warning • .btn-danger • .btn-link Bootstrap Buttons Style Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Buttons Style Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> … Read more
Alert refers to a state of being watchful. Bootstrap provides the .alert class to provide an easy way to create predefined alert messages. The .alert class will be followed by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger. Bootstrap Alert Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Alerts Example</title> <meta charset="utf-8"> <meta … Read more
Bootstrap provides the following classes to add a rounded border around an element with a gray background color and some padding. .well: Add a normal size well. .well-sm: Add a small size well. .well-lg: Add a large size well. Bootstrap Well Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Wells Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, … Read more
Jumbotron: Jumbotron refers to a big box for calling extra attention to some special content or information. It is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it. Note: Inside a jumbotron we can put nearly any valid HTML, including other Bootstrap elements/classes. Use class … Read more
Grid: Grid refers to an array of squares or rectangles. According to Wikipedia: “In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design. In web design, … Read more
Containers: Bootstrap containers are used to wrap the site contents. A bootstrap container is utilized to set the content’s margins dealing with the responsive behaviors of our layout format. It contains the row components and the row components are act as a container of columns. This is known as grid system. Bootstrap container classes: .container … Read more
Add the HTML5 doctype: Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. So we have to include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> … Read more
Bootstrap: Bootstrap is the most popular and powerful front-end framework for faster, easier, responsive and mobile friendly web development. Bootstrap uses HTML, CSS and JavaScript for various web and user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, and Carousel etc. Bootstrap cdn link: CDN: CDN refers to Content Delivery … Read more