Skip to content

2018-11-18 Css

Bootstrap 4 Good Bits

Bootstrap 4: the Good Bits#

Notes from moving from Bootstrap 3 to Bootstrap 4.

See the Bootstrap 4 migration guide for the full migration details.

Reboot and Normalize.css#

Bootstrap 4 uses Reboot, which builds on Normalize.css, to make default browser styling more consistent.

Headings#

Display headings can be used for extra-large headings without creating a custom class.

Use:

<h1 class="display-1">Synergy Systems Online</h1>

display-1, display-2, display-3 and display-4 can be used.

Lead paragraphs make a paragraph stand out:

<p class="lead">Coming soon, the company bringing SaaS and data science solutions for your product.</p>

Layout#

Use standard containers.

As in Bootstrap 3, wrap your content in:

<div class="container">
    <!-- Content here -->
</div>

You can also use .container-fluid.

Containers are required for using the grid system.

Hiding#

Hiding elements is different in Bootstrap 4.

There is no longer a hidden-* class.

Now there is the .d-*-* class.

Eg. hidden only on xs: .d-none .d-sm-block.

Floating (Pull)#

.pull-right and .pull-left are gone. These are now handled by float utilities.

Use .float-left, .float-right and .float-none.

You can also float on specific viewport sizes:

<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div>

Offsetting#

Offsets are no longer of the form: col-md-offset-2

They are now simply: offset-md-2

Media Query Ranges#

Media query ranges or breakpoints are split into five groups.

  • xs: no minimum
  • sm: >= 34em, >= 576px
  • md: >= 48em, >= 720px
  • lg: >= 62em, >= 940px
  • xl: > 75em, >= 1140px

Push and Pull Removed#

push and pull modifiers have been removed in favour of order:

  • .col-8.push-4 becomes .col-8.order-2
  • .col-4.pull-8 becomes .col-4.order-1

Grid#

container > row > columns

There are 1 to 12 columns per row.

If you want equal-width columns, you do not need to specify the size:

<div class="container">
    <div class="row">
        <div class="col-sm">1</div>
        <div class="col-sm">2</div>
        <div class="col-sm">3</div>
    </div>
</div>

Components#

Cards#

Cards are a useful addition. They replace a common pattern that previously needed custom markup and CSS.

Fixing the navbar to the top uses .fixed-top instead of .fixed-navbar-top

Content#

Images#

Responsive images

.img-responsive is replaced by .img-fluid.

Image thumbnails give a rounded border to an image:

<img src="..." alt="..." class="img-thumbnail">

Circle images:

Use the classes: .rounded-circle and .rounded

Utilities#

Text alignment

Text alignment works in a similar way to Bootstrap 3 with text-center, text-right, text-left and text-justify.

You can also specify alignment for viewport sizes, eg. text-sm-left.

Background colours can be added to any element.

<div class="bg-info">

Background colours do not change text colour. Use .text-* colour utilities.

Contextual Text Colours

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Spacing#

Spacing utilities remove the need to add custom CSS for common margin and padding adjustments.

The format for spacing is {property}{sides}-{size} for all sizes. For breakpoints sm, md, lg, and xl use: {property}{sides}-{breakpoint}-{size}

Property is:

  • m - margin
  • p - padding

Sides are:

  • t - top
  • b - bottom
  • l - left
  • r - right
  • x - left and right
  • y - top and bottom
  • blank - for all 4 sides

Size is:

  • 0 - removes margin or padding
  • auto - set the margin to auto
  • 1 - $spacer * 0.25
  • 2 - $spacer * 0.5
  • 3 - $spacer * 1
  • 4 - $spacer * 1.5
  • 5 - $spacer * 3

Size uses rem, or root em, which is a CSS unit relative to the font size of the root element, usually <html>.

Eg:

<div class="mt-3">