Lesson 7 – Bootstrap Helper Classes

There are many helper classes in Bootstrap that might come handy in certain situations. For example, if you want to quickly float an item to the left, you can simply use the float-left class like the example below shows.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Layout</title>
</head>
<body>
    <div class="container text-white"> 
        <div class="float-left bg-primary">Floats the item to the left.</div><br>
        <div class="float-right bg-secondary">Floats the item to the right</div><br>
        <div class="float-none bg-success">Don't float on any viewport sizes</div>
    </div>  
    
    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    http://bootstrap.min.js
</body>
</html>

Here is the output of the above code.

Similarly, you can dismiss items like alerts and modals using the close class. The close class actually displays a clickable close icon.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Helper Classes</title>
</head>
<body>
        <p>Example of Close Class
            <button type = "button" class = "close" aria-hidden = "true">
                &times;
            </button>
        </p>
    
    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    http://bootstrap.min.js
</body>
</html>

Once executed, the above code will produce the following result.

Bootstrap also has a generic “clearfix” class to clear the float between two elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Helper Classes</title>
</head>
<body>
    <div class = "clearfix p-2 bg-primary text-white">
   
                <div class = "float-left" style = "background:#58D3F7;">
                   Quick Float to left
                </div>
                
                <div class = "float-right" style = "background: #DA81F5;">
                   Quick Float to right
                </div>
                
             </div>
    
    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    http://bootstrap.min.js
</body>
</html>

The outcome of the above code is as under. It is actually imperative to understand how layout classes in Bootstrap work. Otherwise, you will always struggle to develop beautiful and engaging websites in this framework.

In the next lesson, we will talk about how to create a cool Navbar in Bootstrap.