Bootstrap Helper Classes

Bootstrap Helper Classes

In this section the helper classes in bootstrap will be explained

Close Icon:

The close icon is used to close the alert messages or other dialog boxes that may appear on the web page. To include the close icon on your webpage you can use the .close class. Consider the following example in which we have used this class:

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<scriptsrc=”/scripts/jquery.min.js”></script>

<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<h3>Close Icon</h3>

<p>

<br>

<buttontype = “button” class = “close” >

&times;

</button>

</p>

</body>

</html>

The above code will generate the following result:

OUTPUT:

close icon

Carets:

Carets are used to create a dropdown function. The caret class is used inside the <span> element to create the dropdown function. Consider the following example in which we have used the caret class:

CODE:

< !DOCTYPE html >

<html>

<head>

<title> Bootstrap Example < / title >

<linkhref = “/ bootstrap/ css / bootstrap. min. css” rel = “stylesheet” >

<scriptsrc = ” / scripts/ jquery . min. js ” >< /script >

<scriptsrc = “/ bootstrap / js/ bootstrap. min. js ” >< /script >

< /head >

<body>

< p > Caret < span class = “caret” >< /span >< /p >

< /body >

< /html >

The above code will generate the following result:

OUTPUT:

caret

Quick Float:

Quick float means that the elements in bootstrap can be driven to the left or the right side of the page. This can be done by using the pull-left and pull-right classes. Consider the following example in which we have done this:

CODE:

<! DOCTYPE html >

<html>

<head>

<title> Bootstrap Example < /title >

<linkhref = “/ bootstrap /css /bootstrap. min. css ” rel = “stylesheet” >

<scriptsrc = “/ scripts/ jquery. min. js ” >< / script >

<scriptsrc = “/ bootstrap / js/ bootstrap. min. js ” >< /script >

< /head >

<body>

<div class = “pull- left” > Floating to Left side < /div >

<div class = “pull- right” > Floating to right side < /div >

< /body >

< /html >

The above code will generate the following result:

OUTPUT:

Floating to Left side

We use the .navbar- left and .navbar- right for the alignment of the components in navbars.

Center Content Blocks:

An element can be aligned centered by using the center- block class. Consider the following example:

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<scriptsrc=”/scripts/jquery.min.js”></script>

<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<div class = “row”>

<div class = “center-block” style = “width:150px;

background-color:#00FFFF;”>

Centered Content

</div>

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Centered Content

Clearfix:

The .clearfix class is used to clear float of the elements. Consider the following example in which we have used the .clearfix class:

CODE:

<! DOCTYPE html >

<html>

<head>

<title> Bootstrap Example < /title >

<linkhref = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet ” >

<scriptsrc = ” / scripts/ jquery. min. js ” ></ script >

<scriptsrc = ” / bootstrap / js/ bootstrap. min. js ” >< /script >

</ head >

<body>

<div class = “clearfix” style = “background: #00ffbf; border: 2px solid #000; padding: 15px; ” >

<div class = “pull- left” style = “background: #ffcccc; ” >

Floating to left side

</ div>

<div class = “pull- right” style = “background: #ffcccc; ” >

Floating to right side

</ div>

< /div >

< /body >

</ html>

The above code will generate the following result:

OUTPUT:

Floating to right side

Showing and Hiding Content:

The classes like .show and .hidden are used to show and hide an element respectively on screen. Consider the following example in which we have used these classes:

CODE:

<! DOCTYPE html >

<html>

<head>

<title> Bootstrap Example </ title >

<linkhref = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet ” >

<scriptsrc = “/ scripts/ jquery. min. js ” ></ script >

<scriptsrc = “/ bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<div class = “row” style = “padding: 95px 150px 22px 55px;”>

<div class = “show” style = “left-margin:15px; width:250px; background-color:#00ffbf;”>

Using show class Element is visible

</div>

<div class = “hidden” style = “width:250px; background-color:#00ffbf;”>

Using hidden class Element is hidden

</div>

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Using hidden class Element is hidden

In the above example, if we remove the .hidden class then we can see the text.

Screen Reader Content:

The sr-only class is used to hide information or content from all the devices except the screen readers. Consider the following example in which we have used sr- only class:

CODE:

<! DOCTYPE html >

<html>

<head>

<title> Bootstrap Example </ title >

<linkhref = “/ bootstrap/ css/ bootstrap. min. css ” rel = “stylesheet” >

<scriptsrc = “/ scripts/ jquery. min. js ” ></ script >

<scriptsrc = “/ bootstrap/ js / bootstrap. min. js ” >< /script >

</ head >

<body>

<div class = “row” style = “padding: 100px 110px 20px 60px; ” >

<form class = “form- inline” role = “form” >

<div class = “form- group” >

< label class = “sr- only” for = “email” > Enter you email address </ label >

< input type = “email” class = “form- control” placeholder = “your email address” >

</ div>

<div class = “form- group” >

< label class = “sr- only” for = “pass” > Enter your Password </ label >

< input type = “password” class = “form- control” placeholder = “your password” >

</ div>

</ form >

</ div>

< /body >

< /html >

email or password

In the above example, if we remove the sr- only class then the labels of the input can be seen.