Bootstrap

4.2 Bootstrap Basics

Contents

Documentation

What you can do in Bootstrap is pretty extensive. You will need to reference the documentation (or the "instructions manual") for details. We cover some of the basics here, but you should get used to looking at the documentation.

On this site you'll see links to the Bootstrap documentation as it relates to that section.

Video Headline

Creating a Container

Make one "box" to be used that all the other rows, columns, and boxes will go in. This is called a container and you use it by invoking the container class. It will automatically center on the page and be responsive (add some content inside to see it).



<div class="container">

</div>

You do not need to do any additional CSS because this class is provided by Bootstrap.

Adding More than One Class

In Bootstrap you will often be applying more than one class to an element. To do so, you just list all the classes you want to apply separated by a space (don’t worry about what each of these mean right now, just get used to seeing the syntax).



<div class="col bgcolor text-center px-0 my-4">
</div>


You will not be able to see the container unless you have content in it and/or adjust some property. This example below has a second class of "bgcolor" which changes the background color. This second class is created in your general CSS file — it is not provided by Bootstrap.


<!-- HTML -->
<div class="container bgcolor">

</div>


/* CSS */
.bgcolor{
    background-color:#ff0000;
}

Creating a Row

When building out your page layout in boxes, create rows first. Use the row class whenever you have a new row in your layout.



<div class="row">
</div>