Lesson 5 – Bootstrap Layout

You always need to space, align, hide and show content while developing a website. Bootstrap makes it easier for you to perform all these tasks quite conveniently through its layout utilities and classes. We will first start with display classes.

Display Classes

Display classes allow you to toggle the content within an element responsively and quickly. For instance, if you want to display two inline elements, you will use the d-inline class.

<!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 Colors</title>
</head>
<body>
    <div class="container">
        <div class="d-inline p-3 bg-dark text-white">Inline element</div>
        <div class="d-inline p-3 bg-info text-white">Inline element</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.

Now, if you want to display the same divs as block elements, you will use the d-block class.

<!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 Colors</title>
</head>
<body>
    <div class="container">
        <div class="d-block p-3 bg-dark text-white">Inline element</div>
        <div class="d-block p-3 bg-info text-white">Inline element</div>
    </div>
    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    http://bootstrap.min.js
</body>
</html>

Now, the divs will appear as block elements on your web page.

You can also hide an element using d-none class.

<!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">
        <div class="d-none p-3 bg-dark text-white">Block element</div>
        <div class="d-block p-3 bg-info text-white">Block element</div>
    </div>
    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    http://bootstrap.min.js
</body>
</html>

As you can see, the first div with the d-none class is no longer visible but the second div is.

Padding and Margin

Bootstrap also has dedicated classes for adding padding and margins. For example, m and p are the classes that set the margin and padding respectively. Similarly, you can add t, l, b, and r with m and p to add padding and margins to top, left, bottom, right, or all four sides. On the other hand you can use p-x and p-y as well as m-x and m-y classes to add padding and margin to left and right and top and bottom respectively.

Here are few examples of how to apply margin and padding to an element.

<!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">
       <div class="d-block p-5 bg-dark text-white">This div has padding on all four sides</div>
       <div class="d-block mt-4 bg-primary text-light">This div has margin applied only to top</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.

In the next lesson, we will learn Bootstrap Flex classes.