Can not apply panel class in bootstrap

Question

In my project Bootstrap styles are not working for div and span classes.But Bootstrap styles are properly working for buttons.

<div>
  /*Can not apply style for panel*/
  <div class="panel panel-default">
      <div class="panel-body">A Basic Panel</div>
  </div>
  /*Style for button is properly working.*/
  <button class="btn btn-primary">Save</button>
</div>

Answer 1

I believe you're using Bootstrap 4. Panels are deprecated in v4 as they've introduced cards.

Dropped panels, thumbnails, and wells for a new all-encompassing component, cards.

See migration details

Use .card instead of .panel and .card-body instead of .panel-body.

<div class="card">
    <div class="card-body">A Basic Panel</div>
</div>

Complete migration details :

• .panel to .card, now built with flexbox.
• .panel-default removed and no replacement.
• .panel-group removed and no replacement. .card-group is not a replacement, it is different.
• .panel-heading to .card-header
• .panel-title to .card-title. Depending on the desired look, you may also want to use heading elements or classes (e.g. <h3>, .h3) or bold elements or classes (e.g. <strong>, <b>, .font-weight-bold). Note that .card-title, while similarly named, produces a different look than .panel-title.
• .panel-body to .card-body
• .panel-footer to .card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, and .panel-danger have been dropped for .bg-, .text-, and .border utilities generated from our $theme-colors Sass map.