Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap panel not working

I'm using bootstrap with angular, but the panels aren't working correctly. I can confirm the files are in the right spots.files This is what it looks like: result I can use btn and btn-primary, but not panel. What could be causing this issue?

<html>
    <head>
        <link rel="stylesheet" href="css/bootstrap.css">
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="panel panel-default">
          <div class="panel-body">
            Basic panel example
          </div>
        </div>
        <button class="btn btn-success">test</button>
    </body>
</html>
like image 830
MStimp Avatar asked Sep 26 '17 14:09

MStimp


People also ask

Why my bootstrap is not working?

These are the possible reasons: You have a wrong or incorrect link to the bootstrap file. browser caching and history is messing with your html. Other CSS files are overriding the bootstrap file.

Is there Panel in bootstrap 5?

Bootstrap 5 Panels are content containers that are flexible and expandable, allowing for a wide range of content, contextual backdrop colors, and sophisticated display choices. Panels are like cards, however they don't have any media.

What are panels in bootstrap 3?

A panel is a component in bootstrap, which is basically a frame or container consist of some content in form of text, lists or tables, etc., having some padding around it. Panels support a large variety of content.


2 Answers

If you are using Bootstrap 4 read this:

Panels, thumbnails, and wells
Dropped entirely for the new card component.

Panels
.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 to .card-primary and .card-inverse (or use .bg-primary on .card-header)
.panel-success to .card-success and .card-inverse (or use .bg-success on .card-header)
.panel-info to .card-info and .card-inverse (or use .bg-info on .card-header)
.panel-warning to .card-warning and .card-inverse (or use .bg-warning on .card-header)
.panel-danger to .card-danger and .card-inverse (or use .bg-danger on .card-header)

https://v4-alpha.getbootstrap.com/migration/#panels-thumbnails-and-wells

like image 71
Adaleni Avatar answered Oct 03 '22 23:10

Adaleni


For Bootstrap 4, panels have been dropped in favour of cards

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>


<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
like image 27
ProEvilz Avatar answered Oct 03 '22 23:10

ProEvilz