Badges are used to add additional information to any content. For example here News 5 numerical indicators refers to number of items associated with the News link. The .badge class is used with elements to create badges. Bootstrap 4 Badges Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Badges Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, … 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 4 Button Groups Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Button Groups Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" … Read more
Bootstrap provides the following classes to set a button as active or disabled. .active: makes a button clickable. .disabled: makes a button unclickable. Bootstrap 4 Buttons States Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Button States 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/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> … 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 • .btn-secondary • .btn-dark • .btn-light Bootstrap 4 Buttons Style Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Buttons Style Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link … Read more
Alert refers to a state of being watchful. Bootstrap 4 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,.alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark. Bootstrap 4 Alert Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap … 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 4 Well Example: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Wells Example</title> <meta charset="utf-8"> <meta … 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