Hello folks! welcome back to a new section of our tutorial on Bootstrap. In this tutorial, we are going to be discussing about some of the helper classes in Bootstrap.
Close Icon
Use the close icon for removing content like modals and alerts. In order to get the close icon, use the close class.
Example
Following is a simple example -
<p>Close Icon Example <button type = "button" class = "close" aria-hidden = "true"> × </button> </p>
Output
When the above example is executed, it will produce the following result -
Close Icon Example
Carets
Make use of carets for indicating dropdown functionality and direction. Make use of the class caret with a <span> element in order to get the functionality.
Example
Following is a simple example -
<p>Caret Example<span class = "caret"></span></p>
Output
When the above example is executed, it will produce the following result -
Caret Example
READ: Bootstrap | Images
Quick Floats
You can float an element to the left or right with class pull-left or pull-right respectively.
Example
Following below is a simple example -
<div class = "pull-left">Quick Float to left</div> <div class = "pull-right">Quick Float to right</div>
Output
When the above example is executed, it will produce the following result -
Quick Float to left
Center Content Blocks
Use class center-block to set an element to center.
Example
Following below is a simple example -
<div class = "row"> <div class = "center-block" style = "width:200px; background-color:#ccc;"> This is an example for center-block </div> </div>
Output
When the above example is executed, it will produce the following result -
This is an example for center-block
Clearfix
To clear the float of any element, use class .clearfix.
Example
Following below is a simple example -
<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;"> <div class = "pull-left" style = "background:#58D3F7;"> Quick Float to left </div> <div class = "pull-right" style = "background: #DA81F5;"> Quick Float to right </div> </div>
Output
When the above example is executed, it will produce the following result -
Quick Float to left
Showing and Hiding Content
You can force an element to be shown or hidden (including for screen readers) with the use of classes .show and .hidden.
Example
Following below is a simple example -
<div class = "row" style = "padding: 91px 100px 19px 50px;"> <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;"> This is an example for show class </div> <div class = "hidden" style = "width:200px; background-color:#ccc;"> This is an example for hide class </div> </div>
Output
When the above example is executed, it will produce the following result -
This is an example for show class
Screen Reader Content
With class .sr-only, you can hide an element to all devices except screen readers.
Example
Following below is a simple example -
<div class = "row" style = "padding: 91px 100px 19px 50px;"> <form class = "form-inline" role = "form"> <div class = "form-group"> <label class = "sr-only" for = "email">Email address</label> <input type = "email" class = "form-control" placeholder = "Enter email"> </div> <div class = "form-group"> <label class = "sr-only" for = "pass">Password</label> <input type = "password" class = "form-control" placeholder = "Password"> </div> </form> </div>
READ: Bootstrap | Forms
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Responsive utilities.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.