Bootstrap 4 Layouts in Depth/

...

/

Update the Layout

Update the Layout

Learn how to make our site layout more dynamic and engaging.

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.

Press + to interact
* {font-family:Arial!important}

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

Press + to interact
<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.

<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. ...