Bootstrap helper classes

devika varshney
Last Updated: May 13, 2022

Introduction

These classes make users' lives easy to create attractive web pages. There are classes for changing the text color and alignment. For example we have .text-primary, .text-secondary, and for showing and hiding the element, we use class .show and .hidden class. Now we will try to cover most of the bootstrap helper classes.

Screen reader content 

Adding class .sr-only, we can hide elements from all the devices except those with screen readers.

Showing and hiding elements 

Using the .show class, we can force elements to be shown on screen, and with .hidden class, we can move parts to be hidden on the screen.

Clearfix

.clearfix class removes the float of any element.

Center content block

.center-block will align the item in the center.

Quick floats 

We can float an element by adding the class .pull-left for the left direction and .pull-right for the right direction.

Carets 

We use class .caret class with <span> element for indiacating dropdown functionality and direction.

Close icon 

We use the class .close to get the close icon for dismissing modals and alerts.

Color classes

Color classes are used to change the color of the text for your web page and convey a specific meaning.

for example, we have 

  • .text-primary 

It applies blue color to the text.

  • .text-secondary 

It applies grey color to the text.

  • .text-success 

It applies green color to the text.

  • .text-danger

It applies red color to the text.

  • .text-light

It applies a very light grey color to the text. 

  • .text-white-50

It applies white color to the text with 50% transparency.

And like this, we have many other color classes. 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 Color Classes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4"> 
    <p class="text-primary">.text-primary</p>
    <p class="text-secondary">.text-secondary</p>
    <p class="text-success">.text-success</p>
    <p class="text-danger">.text-danger</p>
    <p class="text-light bg-dark">.text-light</p>
    <p class="text-white-50 bg-dark">.text-white-50</p>
</div>
</body>
</html>                            

 

Output

Background color classes 

It is similar to contextual color classes, but it applies color to the element's background to emphasize them.

  • .bg-primary 

It applies blue color to the background.

  • .bg-secondary 

It applies grey color to the background.

  • .bg-success 

It applies green color to the background.

  • .bg-danger

It applies red color to the background.

  • .bg-light

It applies a very light grey color to the background. 

  • .bg-transparent

It applies transparency to the background.

And like this, we have many other color classes for background. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 Background Color Classes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4"> 
    <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
    <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
    <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
    <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
    <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
    <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
</div>
</body>
</html>                            


Output

Text alignment classes 

  • .text-start

It aligns the text to the left-hand side of the page.

  • .text-end

It aligns the text to the right-hand side of the page.

  • .text-center 

It aligns the text to the center of the page.

  • .text-wrap

Overflowing text is wrapped with the use of this class. 

  • .text-nowrap

This class prevents the wrapping of the text.

  • .text-break

For preventing the overflow, it breaks the long words.

  • .fw-light 

The element appears in light font-weight when we use this class.

  • .fw-normal

The element appears in normal font weight when we use this class.

  • .fw-bold

The element appears in bold font-weight when we use this class.

  • .text-decoration-none

This class removes all the decoration such as underline, italic from the text.

We have many other classes for decorating the text.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap 5 Text Classes</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="m-4">
         <h2>Text alignment</h2>
         <p class="text-start">Left aligned text on all viewport sizes.</p>
         <p class="text-center">Center aligned text on all viewport sizes.</p>
         <p class="text-end">Right aligned text on all viewport sizes.</p>
         <p class="badge bg-primary text-wrap" style="width: 6rem;">This text should wrap.</p>
         <p class="text-nowrap bg-warning" style="width: 10rem;">No wrap text. This text should overflow the parent.</p>
         <p class="text-break">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
         <p class="fw-normal">Normal weight text.</p>
         <p class="fw-light">Light weight text.</p>
         <p class="fw-bold">Bold text.</p>
         <p><a href="#" class="text-decoration-none">This link has its text decoration removed.</a></p>
      </div>
   </body>
</html>

 

Output

Border classes

Border classes are used for styling the border and border-radius of elements like images, buttons, or any other element.

  • .border-start

It adds the border on the top side of the element.

  • .border-end

It adds the border on the end side of the element.

  • .border-primary 

The border-color changes when we use this class to blue color.

  • .border-end-0

It removes the border from the end of the element.

  • .rounded 

Elements get the rounded edge when we use this class.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 Border Additive Classes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
     margin: 20px;
    }
    .bs-example span{
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: #ededed;
    }
  
</style>
</head>
<body>
<div class="bs-example"> 
    <span class="border-start border-4"></span>
    <span class="border-end border-4"></span>
    <span class="border border-primary border-4"></span>
    <span class="border border-end-0 border-4"></span>
    <span class="border rounded border-4"></span>
</div>
</body>
</html>


Output

Frequently Asked Questions

  1. What are Bootstrap helper classes for floating the element?
    .float-end, .float-start, .clearfix etc.
     
  2. What are Bootstrap helper classes for adding shadow to the element?
    .shadow , .shadow-sm, .shadow-lg, .shadow-none.

Key Takeaways

In this blog, We talked about bootstrap helper classes. We covered color classes, background-color classes, carets, close icon, straightforward fix, text alignment classes, border classes.

Don't come to a halt here. Check out our Importance of JavaScript to web programming. You can also check out the blog on the JavaScript Interview Questions. Check out some javascript certifications by clicking on Javascript certifications.
 

Was this article helpful ?
1 upvote

Comments

No comments yet

Be the first to share what you think