Top 10 Bootstrap 4 Answers

Read this before embarrassing yourself on Stack Overflow

With the recent release of Bootstrap 4, there are many issues that developers encounter when migrating from Bootstrap 3, or attempting to learn Bootstrap 4 as a newbie. Save your self a little time by checking this list of frequent Questions & Answers that will help you troubleshoot and fix your Bootstrap 4 woes.

Common Bootstrap 4 Problems.

• The grid rows & columns don’t work!
• The columns are all full width (xs doesn’t work).
• The columns stack vertically instead of across.
• The Navbar doesn’t work (or doesn’t show).
• The Navbar doesn’t toggle.
• The Navbar is always vertical.
• Vertical alignment or centering doesn’t work.
• Float right (pull right) doesn’t work.

If you’re encountering any of the above issues, the answers are below and most are simple to fix.

#1. The -xs infix has been removed.

Symptoms

• The grid (row>col) simply doesn’t work.
• Columns stack vertically, instead of horizontally.
• Columns are full-width.

The xs tier still exists in Bootstrap 4, but use of the -xs infix has ceased. This is because mobile (extra-small) is the default or implied tier. So instead of using col-xs-3 just used col-3.

Read more on Stack Overflow

#2. Columns must be the immediate children of rows.

Symptoms

• The grid (row>col) simply doesn’t work as expected.
• Columns stack vertically, instead of horizontally.
• Nested columns don’t work.

This is simple, but often overlooked. Columns (col-*) must be the direct children of row. Check and re-check this simple rule, especially when using nested columns.

Wrong:

<div class="row">
   <div class="text-center">
      <div class="col-10">content</div>
      <div class="col-2">content</div>
   </div>
</div>

Correct:

<div class="row text-center">
    <div class="col-10">content</div>
    <div class="col-2">content</div>
</div>

Wrong:

<div class="row">
   <div class="col-md-6">
      <div class="col-4">A</div>
      <div class="col-4">B</div>
      <div class="col-4">C</div>
   </div>
</div>

Correct:

<div class="row">
   <div class="col-md-6">
      <div class="row">
          <div class="col-4">A</div>
          <div class="col-4">B</div>
          <div class="col-4">C</div>
      </div>
   </div>
</div>

“Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins… In a grid layout, content must be placed within columns and only columns may be immediate children of rows.”

Read more on Stack Overflow

#3. Make sure you properly install jquery & popper.js.

Symptoms

• JavaScript errors in browser console (F12).
• Dropdowns, Navbar and other components don’t work.

Many Bootstrap 4 components require the use of JavaScript to function. Specifically, they require jQuery, and the umd version of popper.js. Read the “Getting Started” section of the Bootstrap docs for details.

#4. The Navbar typically needs navbar-expand.

Symptoms

• The Navbar brand, links or toggler icon don’t appear.
• The Navbar is always stacked vertically (non-horizontal).

Since Bootstrap is mobile-first, the Navbar is collapsed vertically into the mobile version by default. If you want a horizontal Navbar layout, use the responsivenavbar-expand classes…

navbar-expand -- always horizontal, non collapsing
navbar-expand-xl -- collapses into mobile < 1200px
navbar-expand-lg -- collapses into mobile < 992px
navbar-expand-md -- collapses into mobile < 768px
navbar-expand-sm -- collapses into mobile < 576px

Read more on Stack Overflow

#5. The Navbar needs -light or -dark to make the links and toggler appear.

Symptoms

• The Navbar brand, links or toggler icon don’t appear.
• The Navbar disappears on smaller screens.

The Navbar uses the navbar-light and navbar-dark classes to determine the color of the brand, links and toggler (hamburger) icon. Make sure you use the appropriate classes to make the Navbar content display.

• Use navbar-dark to get light/white colored links & toggler.
• Use navbar-light to get dark/gray colored links & toggler.

Read more on Stack Overflow

#6. Use the flexbox utility classes or auto-margins to align Navbar content.

Symptoms

• The float-right class doesn’t align Navbar content to the right.
• The v3 navbar-right and pull-right classes don’t work.

Bootstrap 4 has many different ways to align navbar items. float-right won't work because the navbar is now flexbox.

Read more on Stack Overflow

#7. Use the flexbox utility classes or auto-margins to vertical center content.

Symptoms

• align-middle doesn’t work to vertical center.

Now that Bootstrap 4 offers flexbox and other utilities, there are many approaches to vertical alignment including auto-margins, flex alignment (align-items and justify-content) and flex direction.

However, remember that vertical centering is always relative to the height of the parent container. Make sure to understand that height:100% only works when the parent has a defined height.

Read more on Stack Overflow

#8. Use the `no-gutters` to remove the spacing (gutter) between columns.

Bootstrap uses padding to create the spacing (A.K.A “gutter”) between columns. If you want columns with no horizontal spacing, Bootstrap 4 includes a no-gutters class that can be applied to the entire row .

Additionally, there are Spacing utility classes, that that enable control of padding/margins of any element. This can be helpful to add or remove the gutter for a individual columns.

Read more on Stack Overflow

#9. Use the spacing utility classes.

As described above in #8, there are responsive Spacing utility classes, that that enable control of padding or margins of any element. For example you may want to add vertical spacing between rows or columns.

You can apply spacing to any side (top, left, bottom, right), and the Spacing classes follow a logical naming convention…

• mt-0 means margin top 0 units
• pb-2 means padding bottom 2 units
• px-3 means padding left and right (x-axis) 3 units

Read more on Stack Overflow

#10. The hidden- and visible- classes no longer exist.

The hidden-* and visible-* classes no longer exist in Bootstrap 4. If you want to hide an element on specific tiers or breakpoints in Bootstrap 4, use the d-* Display utility classes.

• d-block means display:block
• d-none means display:none
• d-flex means display:flex
• d-md-block d-none means display on md (and up), otherwise hide

Read more on Stack Overflow

Hopefully at this point you found an answer, but if not be sure to read the official Bootstrap Documentation.

❤ Bootstrap

If you liked this, also explore Bootstrap 4 Examples on Codeply.