Search⌘ K
AI Features
Home
Courses
Bootstrap 4 Layouts in Depth

Update the Layout

Explore how to update and optimize a Bootstrap layout by setting Arial as the font, enhancing the pricing section's appearance, adjusting spacing, and fixing button styles. Learn to efficiently use DevTools and CSS techniques to refine the layout's design and visual hierarchy.

We'll cover the following...

Layout's font style

To complete our layout, we’ll do only a couple of things:

  • Set Arial as the layout’s font.

  • Update the jumbotron "Pricing" section.

To set Arial as the layout’s font, we can just add this CSS to our layout.

NAME_
CSS
* {font-family:Arial!important}

Next, we’ll update the pricing section, which currently looks like this.

HTML
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
    <h1 class="display-4">Pricing</h1>
    <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap
        example.It’s built with default Bootstrap components and utilities with little customization.</p>
</div>

We’ll alter the code above by adding another class to wrap the h1 and p tags, and give it a class of container-narrow.

HTML
NAME_
CSS
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
    <div class="container-narrow bg-secondary">
        <h1 class="display-4">Pricing</h1>
        <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap
            example.It’s built with default Bootstrap components and utilities with little customization.</p>
    </div>
</div>

We’ve also added the bg-primary and text-light classes to the utmost wrapping div to make our pricing copy look a bit nicer. ...