- Introduction and Installation
- Buttons, Glyphicons, Tables
- Vertical Forms, Horizontal Forms, Inline Forms
- DropDowns and Responsive Tabs
- Progress Bar and Jumbotron
We all have seen some numerical indicators beside some links in various websites. These are called badges. These badges tells how many items are available or associated with the link.
To add a badges to your webpage, add a class .badge to a span element like this-
Badges inside buttons
To insert badges inside buttons, add a class .badge to a button element like this-
We all have seen some additional information beside some links in various websites. These are called lables. These lables tells additional information about the link or text.
To add a lables to your webpage, add a class .lable to a span element like this-
- Use the following classes to style the colour of the lable
Grey – lable-default
Green – lable-success
Blue – lable-info
Red – lable-danger
We all have seen a box around some text or any information in various websites. These are called panels. These panels are bordered box with some padding which can be easily added around some text using bootstrap classes.
The content we need to write inside the panel is written in a div element with a class.panel-body
To add a panels to your webpage, add a class .panel to a div element like this-
Grey – panel-default
Green – panel-success
Blue – panel-info
Red – panel-danger
Page header allows us to write a heading on our webpage with proper spacing around it so that it can be distinguished from other text on the webpage.
To add a pageheader to your webpage, add a class .page-header to a div element like this-
Note the difference if we don’t use page-header class
This article is contributed by Ayush Saxena. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.
- Bootstrap 4 | Badges
- Bootstrap | Badges and Breadcrumbs
- How to use Bootstrap to align labels with content into 4 columns ?
- How to Design Half-Page Carousel in Bootstrap ?
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
- What is SEO Page Title Tag?
- How to set sticky navbar only for first section of page?
- How to Create a Facebook Phishing Page ?
- What is Search Engine and Google Page Ranking?
- What's new in Bootstrap v4.3 ?
- 7 Essential Tips for Landing Page Optimization to Increase Conversion Rate
- Bootstrap | Tables | Set-2
- Bootstrap 4 | Panels
- Bootstrap | Scrollspy
- Bootstrap | Cards
- Bootstrap 5 Introduction
- Bootstrap | Carousel