Skip to content
All posts

Big Bootstrap Tutorial - Building a Bootstrap 4 landing page

  Admin  ·  12 minute read

Bootstrap is nowadays the most popular HTML/CSS front-end framework. It is packed with features and it will help you to create a responsive website more quickly and easily.

Do you need an introduction to Bootstrap and learn how to build a webpage with it step by step?

This tutorial is the right place to start.

In the first part of the article, I would like to show you Bootstrap's main strengths and advantages.

In the second part, I will teach you how to build a basic Bootstrap landing page from scratch.

I try to describe everything step by step, so it is comprehensible for all Bootstrap beginners.

After finishing the tutorial, you will have a beautiful and functional page with various sections - services, favourite quote, portfolio and more.

Bootstrap tutorial

 

Table of contents

Learn Bootstrap by building a landing page

The page we're going to build in the tutorial

See it live

What is Bootstrap?

  • Bootstrap is a modern front-end framework to speed up and help you with website development. (Front-end framework means that it can help you with your website’s layout and design but it cannot do any back-end stuff as sending an email, keeping an eye on your visitor’s shopping basket or accessing a database.)
  • The framework basically consists of the set of two files - Bootstrap.js and Bootstrap.css. If you include them on your HTML page or website, it will enable you to use its HTML components and features.

Bootstrap's main advantages

  • Responsive grid - quickly layout your webpage using Bootstrap grid - quickly create columns and rows. Do you need 4 items on a row on a desktop, 3 on a tablet and only 1 on mobile? No problem with Bootstrap!
  • Wide selection of pre-made HTML components. Bootstrap comes with a wide variety of components that will kickstart your development even more than the responsive grid. To name a few that you can use in any kind of project:
    • buttons (with colour variants - primary, secondary, their outline variants and much more)
    • navbar - Have you ever wondered how to build a good working responsive navigation from scratch, how to display horizontal navigation on bigger devices like laptops and computers and display it as a sliding-out navigation that appears after the click on an icon on mobiles? Well, I surely did before I started using Bootstrap. Building custom and flexible navigation elements with Bootstrap is really easy.
    • cards
    • dropdowns
    • form inputs and buttons
    • pagination
    • carousel
    • tooltips and alerts
    • and much more…
  • Cross-browser compatibility - Bootstrap supports all the modern web desktop and mobile browser and also the older ones such as IE 11.
  • Easy to use - you will need just a basic HTML and CSS knowledge to get started.
  • Active development - Bootstrap is under an active development which means that new features, bug fixes and improvements are released frequently.
  • Flexibility
  • Big community - a whole ecosystem has formed around Bootstrap. You have a great choice of themes, templates, snippets and custom JavaScript plugins made specifically for Bootstrap users. There's also a plethora of tutorials to help you in the beginnings.

Learn how to use Bootstrap - Let’s build your first Bootstrap page

As I mentioned at the beginning of the article, I would like to show you how Bootstrap works and how to use it in a practical example. 

We will build a basic (but nice)responsive page that can become a good starting point for your portfolio, company website or a landing page. 

We will move slowly from the basics to a bit more advanced techniques at the end of the tutorial.

Also, I will focus on using as few custom styles as possible to demonstrate the Bootstrap's strength.

Let’s do it!

Download the complete source files

Bootstrap 101 template animated

 

1. Hello world and a basic HTML document with Bootstrap

Although there are some nice examples on the Bootstrap website, I would like to start really from scratch to show you even the most basic stuff as including Bootstrap.

A blank Bootstrap page will look like this:

Html 
  
  <!DOCTYPE html>
  <html>
  
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Bootstrap 101: Learn Bootstrap in 60 minutes by Bootstrapious.com</title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="robots" content="all,follow">
      <!-- Bootstrap CSS-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
      <!-- Custom stylesheet - for your changes-->
      <link rel="stylesheet" href="css/custom.css">
      <!-- Tweaks for older IEs-->
      <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  
  <body>
  
      <h1>Hello world. I'm in Bootstrap!</h1>
  
      <!-- JavaScript files-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
  </body>
  
  </html>

Few words about it: 

  • There are the most basic and also necessary HTML tags: doctype, html, head, body. 
  • head of the document is the place where we will place the link to the Bootstrap's stylesheet (bootstrap.min.css) and also our custom stylesheet (css/custom.css).
  • head also contains an important tag for page's responsive behaviour - meta name="viewport"
  • We also need to include Bootstrap's JavaScript. Before, you needed to include also its PopperJS dependency separately. Now, there's a nice way to include everything at once by using the bundled file bootstrap.bundle.min.js. This file already contains minified versions of PopperJS and Bootstrap, so we will need to include only this file.
Hello world in Bootstrap 4

Bootstrap contains a really handy navigation component called Navbar. 

Its main features and advantages are:

  • It automatically collapses on smaller viewports (typically mobiles and tablets). You control this behaviour only by adding or removing a simple HTML class. Also, a pre-made button appears automatically to open the navbar in the collapsed state on smaller devices.
  • It can contain various elements - navigation links, search form, brand logo or text. Everything will be aligned properly and you don't need to think about it.
  • Bootstrap comes with two pre-made navbar designs - one with a light background and dark links and the second one with light navigation links on a dark background. (You are not forced to use these designs though and you can style it completely as you wish).

 

Adding a navbar to the template

We will use built-in Bootstrap syntax only, no custom styling or classes and the result will look like this.

Isn't that great?

Here comes the code for the navbar:

Html 
  
  <!-- navbar-->
  <nav class="navbar navbar-light navbar-expand-lg fixed-top shadow-sm bg-white"><a href="index.html" class="navbar-brand">Bootstrap 101</a>
    <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>
    <div id="navbarSupportedContent" class="collapse navbar-collapse">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a href="#" class="nav-link">About Us</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Testimonials</a></li>
      </ul>
      <div class="navbar-text ml-lg-3">
        <a href="#" class="btn btn-primary text-white shadow">Sign Up</a>
      </div>
    </div>
  </nav>

It might seem a bit complicated but don't be afraid - it's not.

Let's break it into smaller pieces a bit.

In the beginning, I create the navbar from nav element by adding a class= "navbar" to it. This is the main navbar class.

I also add a few modifier classes to it:

  • navbar-light - this modifier class triggers the pre-made design for light navbars - basically, it colours the links and their active, hover, focus states.
  • navbar-expand-lg - an important class that controls on which viewports will navbar be collapsed and from which viewports it will be expanded (i.e., no hamburger menu icon and collapsed navbar menu). In this case, class navbar-expand-lg means that the navbar will be expanded on lg+ viewports.
  • fixed-top - this class affixes the navbar on the top of the screen. Don't include it and the navbar will not scroll with the page.
  • and lastly, few so-called utility classes that do not control the function but are used just for styling purposes - shadow-sm (adds a small shadow) and bg-white (adds a white background)

You usually have your logo or brand in the navbar. Add class="navbar-brand" to it to ensure proper spacing and formatting.

Navbar toggler is a button that toggles the navbar menu in the collapsed state. It gets automatically hidden on expanded navbars based on the navbar-expand-* class.

3. Adding a Hero section to the top 

We have the navbar ready, now it's time to add some more content to our page.

Below the header, I decided to place a hero section with the main message.

The aim of this section is to quickly introduce the content of the webpage to the visitor, assure them they're on the right place and make them stay.

We will meet the Bootstrap grid in the Hero section's code for the first time.

Before anything else, let's see how does it work, first.

Bootstrap grid explained

Bootstrap’s grid system uses a combination of containers, rows, and columns to layout and align content.

It’s built with flexbox and is fully responsive.

The bootstrap grid works with 12 columns.

This means when you place a row (class="row") into a Bootstrap layout, you can divide it up to 12 columns.

Also, a column can span across more columns, so col-6 means that this column will span across the 6 columns, i.e. it will occupy 1/2 of the row's width (6/12).

Bootstrap grid explained

A powerful feature is that you can use the device prefixes to make it behave differently based on the device width.

See the prefixes and names of the classes at the table below.

The column prefix class is valid for the viewport you declare it and up (e.g., col-md-6 is valid for medium, large and extra large devices).

You can combine the classes to make the layout truly responsive.

Let's explain it on an example:

If you use  class="col-12 col-md-6 col-xl-4", it will mean that: 

  • the block will span across 12 columns on Extra small devices and also on Small devices. (Because we don't use col-sm-*, so col-* is valid also for the small breakpoint)
  • it will span across 6 columns of the grid on Medium and Large devices. (again, we don't declare the behaviour with any col-lg-* class, so medium declaration is also valid on large devices)
  • and finally, it will span across 4 columns on the Extra large devices.

 

  Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥1200px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-

Hero section

So, time to go back to our hero section.

Now, as you understand how Bootstrap grid works, it will be easy to digest and understand.

You can see the result of this part's code on the image below.

Hero section

We will place this code below the navbar:

Html 
  
  <!-- Hero Section-->
  <section class="bg-light">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 order-2 order-lg-1">
          <h1>Bootstrap 101 template</h1>
          <p class="lead">Proident eu nisi commodo enim deserunt enim duis sunt nostrud anim. Sunt do sit enim veniam nostrud culpa adipisicing do ullamco occaecat et. </p>
          <p><a href="#" class="btn btn-primary shadow mr-2">Discover More</a><a href="#" class="btn btn-outline-primary">Some another action</a></p>
        </div>
        <div class="col-lg-6 order-1 order-lg-2"><img src="img/macbook.png" alt="..." class="img-fluid"></div>
      </div>
    </div>
  </section>

Let's divide it into pieces again.

  • I use the section element, just to wrap the whole element and give it vertical padding in our custom.css later on. I also add another Bootstrap utility class, this time bg-light to give a very light-grey background to the element.
  • Then, I wrap the content into a container. Containers provide a means to centre and horizontally pad your site’s contents. This means that on the large and extra large devices, the container will limit the site's content width to a maximum of 1140px (on extra large devices).
  • Finally, I divide the content into two columns (each spanning over 6 "base" columns) on lg+ devices (=992 px viewport and up) by placing their content into <div class="col-lg-6">.
  • On smaller viewports, as I don't have anything defined for Extra small, small and medium devices, the width will default to 12 "base" columns (i.e., full width). It's the same as I would use <div class="col-12 col-lg-6">.

If we have a look at the content of the columns, we will find a few important Bootstrap classes there:

Buttons

btn btn-primary will create a nice primary button. If we replace the btn-primary class with a btn-outline-primary, we will get its outline variant. This is exactly what I love about  Bootstrap. You add just two classes to an ordinary element, and voilá, you have a great looking component at your service.

Lead paragraph

 lead is used for the introductory paragraphs mostly.

It will make them stand out by making the font-size a bit larger and using a lighter font weight. I use it quite often at the beginnings of the articles or at the top of the landing pages, like this time.

Responsive images

Another important class is img-fluid. This class makes the image responsive.

If you have a 1200px-wide image on your page, it would overflow the container on small devices that have viewport only e.g. 300px wide.

But if you use the img-fluid class, the image's maximum width will become the width of the device's viewport. So, it will never make your user scroll horizontally because of the image again. I basically use it on all the content images on the page.

4. Adding a Services section

Next, we're going to create a Services section.

We will be using the Bootstrap grid again and some utility classes to make it really nice.

This is how will the result look like:

Services section

And this will be the code for our Services section.

Html 
  
  <!-- Services-->
  <section>
    <div class="container">
      <h2>Services</h2>
      <p class="text-muted mb-5">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p>
      <div class="row">
        <div class="col-sm-6 col-lg-4 mb-3">
          <svg class="lnr text-primary services-icon">
            <use xlink:href="#lnr-magic-wand"></use>
          </svg>
          <h6>Ex cupidatat eu</h6>
          <p class="text-muted">Ex cupidatat eu officia consequat incididunt labore occaecat ut veniam labore et cillum id et.</p>
        </div>
        <div class="col-sm-6 col-lg-4 mb-3">
          <svg class="lnr text-primary services-icon">
            <use xlink:href="#lnr-heart"></use>
          </svg>
          <h6>Tempor aute occaecat</h6>
          <p class="text-muted">Tempor aute occaecat pariatur esse aute amet.</p>
        </div>
        <div class="col-sm-6 col-lg-4 mb-3">
          <svg class="lnr text-primary services-icon">
            <use xlink:href="#lnr-rocket"></use>
          </svg>
          <h6>Voluptate ex irure</h6>
          <p class="text-muted">Voluptate ex irure ipsum ipsum ullamco ipsum reprehenderit non ut mollit commodo.</p>
        </div>
        <div class="col-sm-6 col-lg-4 mb-3">
          <svg class="lnr text-primary services-icon">
            <use xlink:href="#lnr-paperclip"></use>
          </svg>
          <h6>Tempor commodo</h6>
          <p class="text-muted">Tempor commodo nostrud ex Lorem occaecat duis occaecat minim.</p>
        </div>
        <div class="col-sm-6 col-lg-4 mb-3">
          <svg class="lnr text-primary services-icon">
            <use xlink:href="#lnr-screen"></use>
          </svg>
          <h6>Et fugiat sint occaecat</h6>
          <p class="text-muted">Et fugiat sint occaecat voluptate incididunt anim nostrud ea cillum cillum consequat.</p>
        </div>
        <div class="col-sm-6 col-lg-4 mb-3">
          <svg class="lnr text-primary services-icon">
            <use xlink:href="#lnr-inbox"></use>
          </svg>
          <h6>Et labore tempor et</h6>
          <p class="text-muted">Et labore tempor et adipisicing dolor.</p>
        </div>
      </div>
    </div>
  </section>

Bootstrap classes

As you see, there are similarities again with our previous code.

We use again container, row, and columns.

This time, I chose col-sm-6 col-lg-4 classes for each of the services items.

Using this classes combination means there will be:

  • 1 service item on a row on xs devices (no col-* means col-12 by default, i.e. full width)
  • 2 services on sm and md devices (col-sm-6)
  • and 3 services on lg and xl devices (col-lg-4).

I also use mb-3 utility class for the bottom margin.

Last Bootstrap class we use here is text-muted. This basically applies a gray text colour on the element.

Icons

As Bootstrap 4 doesn't ship with any icons, we will be using a free icon set - Linear icons.

To start using it, we will need to add a script from their CDN to the bottom of our Html, next to the Bootstrap bundle script.

We will be using their SVG variants. Find more info about the syntax here.

Html 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
      <script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js"></script>
    </body>
  </html>
Styling the icons

To style the icons properly, we will need to add these lines to our custom.css file.

CSS 
  .lnr {
    display: inline-block;
    fill: currentColor;
    width: 1em;
    height: 1em;
    vertical-align: -0.05em;
    stroke-width: 1;
  }
  
  .services-icon {
    margin-bottom: 20px;
    font-size: 30px;
  }

5. Adding a portfolio section

Now, as we are getting more and more familiar with the Bootstrap grid,  let's move on to explore some more Bootstrap features.

In this part, we will create a portfolio section using another great Bootstrap component - Cards.

Cards are a cool and modern way to present a listing of similar items. Blog posts, products, portfolio items and so on and so on.

Cards in Bootstrap have many possible variations and also quite a few subcomponents that can be used inside the cards - header, footer, body, variously positioned images and more.

For this tutorial, I have chosen to display just an image and a text part with a heading, a short introductory text and a read more link.

Bootstrap 4 card example

This is how our card will look like

 

And here's the entire code for the portfolio section.

I will describe the new Bootstrap classes below.

Html 
  <!-- Portfolio-->
  <section class="bg-light">
    <div class="container">
      <h2>Portfolio</h2>
      <p class="lead text-muted mb-5">In enim non sit irure ut adipisicing laboris et laborum.</p>
      <div class="row">
        <div class="col-md-4 mb-4">
          <div class="card shadow border-0 h-100"><a href="#"><img src="img/mockup0.jpg" alt="" class="card-img-top"></a>
            <div class="card-body">
              <h5> <a href="#" class="text-dark">Ex cupidatat eu</a></h5>
              <p class="text-muted card-text">Ex cupidatat eu officia consequat incididunt labore occaecat ut veniam labore et cillum id et.</p>
              <p class="card-text"><a href="#">Read more</a></p>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card shadow border-0 h-100"><a href="#"><img src="img/mockup1.jpg" alt="" class="card-img-top"></a>
            <div class="card-body">
              <h5> <a href="#" class="text-dark">Tempor aute occaecat</a></h5>
              <p class="text-muted card-text">Tempor aute occaecat pariatur esse aute amet.</p>
              <p class="card-text"><a href="#">Read more</a></p>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card shadow border-0 h-100"><a href="#"><img src="img/mockup2.jpg" alt="" class="card-img-top"></a>
            <div class="card-body">
              <h5> <a href="#" class="text-dark">Voluptate ex irure</a></h5>
              <p class="text-muted card-text">Voluptate ex irure ipsum ipsum ullamco ipsum reprehenderit non ut mollit commodo.</p>
              <p class="card-text"><a href="#">Read more</a></p>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card shadow border-0 h-100"><a href="#"><img src="img/mockup3.jpg" alt="" class="card-img-top"></a>
            <div class="card-body">
              <h5> <a href="#" class="text-dark">Tempor commodo</a></h5>
              <p class="text-muted card-text">Tempor commodo nostrud ex Lorem occaecat duis occaecat minim.</p>
              <p class="card-text"><a href="#">Read more</a></p>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card shadow border-0 h-100"><a href="#"><img src="img/mockup4.jpg" alt="" class="card-img-top"></a>
            <div class="card-body">
              <h5> <a href="#" class="text-dark">Et fugiat sint occaecat</a></h5>
              <p class="text-muted card-text">Et fugiat sint occaecat voluptate incididunt anim nostrud ea cillum cillum consequat.</p>
              <p class="card-text"><a href="#">Read more</a></p>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card shadow border-0 h-100"><a href="#"><img src="img/mockup5.jpg" alt="" class="card-img-top"></a>
            <div class="card-body">
              <h5> <a href="#" class="text-dark">Et labore tempor et</a></h5>
              <p class="text-muted card-text">Et labore tempor et adipisicing dolor.</p>
              <p class="card-text"><a href="#">Read more</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

Bootstrap cards

To create a Card in Bootstrap, all you have to do is to create a <div class="card"></div> and place some content into it. This will automatically create a border around the item and add a small border radius to it.

For our portfolio, I use a few modifier classes on the cards, some of them are already known to us.

  • shadow - adds a shadow
  • border-0 - when we have already a shadow there and we use the card on contrasting background, I remove the light-grey border by using this utility class.
  • h-100 - makes the card's height 100% of the parent. As all Bootstrap columns in a row have same height by default, using h-100 on a card inside a column, makes them equally high.

Remaining card subcomponents and classes in our example are:

  • Card image - to properly format the image in the card, the image will need a card-img-top class. This will make its top corners respect the card's border radius.
  • Card body - card-body  class gives padding to the content of the card
  • Card text - card-text class is not required at all but can be useful when you don't know the exact no. of paragraphs inside the card body. If you add this class to all of them, the last paragraph will have its bottom margin automatically set to 0.

And here's the screenshot of the result:

Bootstrap portfolio example

I would say that this looks like a pretty decent portfolio, so let's move to another section.

6. Adding a favourite quote section

Bootstrap has a component for the blockquote element too.

I thought it would be nice to have a little quote section just above the footer.

Its usage is pretty easy - just add a class="blockquote" to a blockquote element.

To give it a bit more interesting look, we will also add an icon to the top of the quote.

Html 
  <!-- Quote-->
  <section>
    <div class="container">
      <blockquote class="blockquote text-center mb-0">
        <svg class="lnr text-muted quote-icon pull-left">
          <use xlink:href="#lnr-heart"> </use>
        </svg>
        <p class="mb-0">There is no place like 127.0.0.1</p>
        <footer class="blockquote-footer">Someone famous in
          <cite title="Source Title">Source Title</cite>
        </footer>
      </blockquote>
    </div>
  </section>
Bootstrap quote of the day

As you can see, working with Bootstrap is really easy, we could be adding more and more sections to the page.

Still, we will now end with the last section - the footer.

Footer example in Bootstrap 4

Its code is pretty straightforward again.

We will use standard Bootstrap grid columns and adjust background and spacing with the utility classes again.

I'll explain more below the code block.

Html 
  <!-- Footer-->
  <div class="py-5 bg-light">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 mb-4 mb-lg-0">
          <h5>Bootstrap 101</h5>
          <ul class="contact-info list-unstyled">
            <li><a href="mailto:sales@landy.com" class="text-dark">hello@bootstrap101.com</a></li>
            <li><a href="tel:123456789" class="text-dark">+00 123 456 789</a></li>
          </ul>
          <p class="text-muted">Laborum aute enim consectetur eu laboris commodo.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h5>Pages</h5>
          <ul class="links list-unstyled">
            <li> <a href="#" class="text-muted">Nisi in commodo</a></li>
            <li> <a href="#" class="text-muted">reprehenderit</a></li>
            <li> <a href="#" class="text-muted">Nostrud</a></li>
            <li> <a href="#" class="text-muted">Et eu eu</a></li>
          </ul>
        </div>
        <div class="col-lg-4 col-md-6">
          <h5>Favourites</h5>
          <ul class="links list-unstyled">
            <li> <a href="#" class="text-muted">Minim labore nulla</a></li>
            <li> <a href="#" class="text-muted">Nulla qui nisi</a></li>
            <li> <a href="#" class="text-muted">Iris Vor Arnim</a></li>
            <li> <a href="#" class="text-muted">Consectetur cupidatat</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="py-3 bg-dark text-white">
    <div class="container">
      <div class="row">
        <div class="col-md-7 text-center text-md-left">
          <p class="mb-md-0">&copy; 2018 Your company. All rights reserved. </p>
        </div>
        <div class="col-md-5 text-center text-md-right">
          <p class="mb-0">Template By <a href="https://bootstrapious.com/" class="external text-white">Bootstrapious</a> </p>
        </div>
      </div>
    </div>
  </div>

New utility classes

  • py-3, py-5 - these two classes add vertical padding. py-3 equals to vertical padding of 1rem, py-5 adds 3rem vertical padding
  • mb-4 mb-lg-0 - utility classes with responsive prefix. As you could tell from the class name, mb-4 adds a bottom margin to the element. (4 = 1.5rem) and we use it in combination with mb-lg-0 to achieve responsive behaviour. On lg+ viewports, this element will have its bottom margin set to 0.
  • text-center text-md-left - similarly, this combination of classes centres the text block on small viewports but starting from md viewport sizes, the text will be aligned to the left.

Wrapping up

Congrats if you managed to get here!

This will be the last part of the tutorial.

I hope you learned a bit about using Bootstrap. I tried to explain all the basics you need to know to build a simple page using Bootstrap 4 and you should be ready now to start building pages with Bootstrap on your own.

So, it's your turn.

People quite often ask me what should they build. What project should they begin to become more skilled with Bootstrap?

My answer's usually this:

Ask your friends or family members if any of them would need a website. I bet you will find more than one person that would be excited to have a good-looking website created by you!

Best of luck on your web-designer journey!

Cheers,

Ondrej

Ready for more?

Check out also my popular tutorial on Bootstrap forms with PHP background.

Or if you're looking for more sections for your landing page, check out my new Bootstrap snippets. You could find About us page, Product listing or Section with a video background particularly useful.