How to Create a Landing Page with Bootstrap 4


1. Set Up Bootstrap 4

There are a couple of ways of getting started with Bootstrap 4. You can:

  • Download the compiled CSS and JavaScript and add it to your.php page,
  • Set up Bootstrap 4 using your own pipeline (choose this if you want to edit Sass files),
  • Use the CDN version of the compiled CSS and JavaScript.

2. Create the Navigation Bar

Bootstrap 4 comes with an awesome pre-designed navigation bar component that lets you add a responsive menu to your landing page with just a few lines of.php. Insert the following code into thesection of your.php file.The most important thing to know about Bootstrap 4 is that it has a utility class for almost everything. For instance, they have .bg-light (see above) that adds a light background and .bg-dark that adds a dark background to any.php element. With Bootstrap 4, you can prototype your designs by barely touching any CSS code.However, as the .fixed-top class fixes the navigation bar to the top, you need to make some extra space for it. So, add the following rule to your custom style.css file. Or, if you don’t want a fixed navigation bar, simply omit the .fixed-top class from your.php code.

3. Compose the Hero Section

Hero sections are an integral part of most landing pages. They usually include a full-width background image, a headline, a short description, and a call-to-action button. Fortunately, Bootstrap 4 has a pre-designed component called Jumbotron that allows you to easily add a hero section to your page. You need to add the .jumbotron class to the element that will hold the hero section.The code above also makes use of Bootstrap 4’s .display-3 and .lead typography classes and the .text-center text alignment class. Besides, it adds bottom padding to the lead text by using the .pb-4 class. If you want to use other margin and padding sizes check out how Bootstrap 4’s spacing classes work. For instance, the .pb-4 class adds the padding-bottom: 1.5rem !important; rule to any.php element. You also need to add a background image to the Jumbotron section in your custom style.css file. If you want you can override the background color of primary buttons, too.

4. Create a Three-Column Section to Showcase Services

To create a three-column Services section, use Bootstrap 4’s responsive grid system consisting of rows and columns that divide up the screen. By default, every row contains 12 columns (however, you can change this in your Sass settings). You can indicate the number of columns you want to use within the name of the column class. For example, .col-4 takes up 4 columns out of the 12.Bootstrap 4 has five responsive breakpoints that define five grids: extra small (default), small, medium, large, and extra large. As the breakpoints are based on minimum width media queries, the column classes apply to their own grid and all the grids above.

5. Add a Full-Width Contact Section

You can add a full-width Contact section to your landing page using Bootstrap 4’s utility classes

6. Create the Footer

Landing pages usually have simple footers, so the code below simply adds a copyright notice to the bottom of the page

Wrapping Up

In this article, we have created a fairly simple landing page. In the real world, it would have other sections as well, such as key features, pricing tables, client logos, and testimonials. Using Bootstrap 4’s responsive grid system, you can easily create other column-based sections as well, similar to the Services section. Bootstrap 4 also has multiple pre-built components such as forms, modals, carousels, and more. Before you begin to add anything to your design, always check out the docs, as the Bootstrap team might have already built it for you. If you want to add a functioning Contact form to your landing page, you can use Google Forms to process the form in the backend. Besides Bootstrap 4, you can also create responsive landing pages with the CSS grid. To see how it works, have a look at our step-by-step guide of how to create a custom CSS grid.

Leave a comment