What Is the '.Well' Equivalent Class in Bootstrap 4

What is the '.well' equivalent class in Bootstrap 4

Update 2018...

card has replaced the well.

Bootstrap 4

<div class="card card-body bg-light">
     Well
</div>

or, as two DIVs...

<div class="card bg-light">
    <div class="card-body">
        ...
    </div>
</div>

(Note: in Bootstrap 4 Alpha, these were known as card-block instead of card-body and bg-faded instead of bg-light)

http://codeply.com/go/rW2d0qxx08

What is the equivalent of the Bootstrap 3 'btn-default' class in Bootstrap 4?

The btn-outline-secondary class and btn-outline-light class in Bootstrap 4 are the 2 closest alternatives to what used to be btn-default in Bootstrap 3. (there's no exact equivalent in Bootstrap 4)

Here's a code snippet with live preview (notice the difference between a button and an a tag):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container m-3">

    <a class="btn btn-outline-secondary">outline-secondary link</a>

    <button type="button" class="btn btn-outline-secondary">outline-secondary 'button'</button>

    <br><br>

    <a class="btn btn-outline-light">outline-light link</a>

    <button type="button" class="btn btn-outline-light">outline-light 'button'</button>

</div>

Is this the most efficient way to add active class to navbar with bootstrap 4

Use

var navLinks = document.querySelectorAll('nav li.active');

So, you did'nt need to test it

But even smarter here is to use JQuery (you load it already because of bs4)

locations.forEach((page) => { 
  if (wlp.includes(page)) {
     $('nav li')
      .removeClass('active')
      .children().filter(('a[href="'+page+'"]')).addClass('active');
  }
});

See
jQuery filter :contains for a link (a href="#")
https://api.jquery.com/filter/
https://api.jquery.com/children/#children-selector

Easier to understand:

locations.forEach((page) => { 
  if (wlp.includes(page)) {
     $('nav li.active').removeClass('active'):
     $('nav li a[href="'+page+'"]')).addClass('active');
  }
});

How can I change the bootstrap's well color?

That should work.

Try and inspect the element in Chrome to determine if some other css is overwriting the background-color. By default .well already contains a background-color - make sure you are replacing this.

Bootstrap cards not showing like in examples

It shows up fine by me. You have to make sure that you are linking the version 4 style sheet.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

---

Related Topics