CODEWITHSUNDEEP
twitter-bootstrap
Dulara Malindu
Dulara Malindu

Reputation: 1637

bootstrap panel is not working properly

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>GMP APP</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/custom.css" type="text/css"/>
</head>
<body>
    <div class="container">  
    <div class="panel panel-default">
        <div class="panel-heading"> SignUp to the system </div>
        <div class="panel-body">
            <<panel content goes here>>          
        </div>
        <div class="panel-footer"> You have 3 More attempts left! </div>
    </div>
        <script src="javascript/jquery.js"> </script>
        <script src="javascript/bootstrap.js"> </script>
    </div>
</body>
</html>

bootstrap is linked correctly. But the panel is not working.! I tried everything. I do assume i have correctly linked relevant libraries. This is the output of the browser page source...

Upvotes: 2

Views: 16603

Answers (2)

Max
Max

Reputation: 411

Panels were dropped in bootstrap >= 4.1. You should use now cards instead:

<div class="card">
  <div class="card-header">
    Header
  </div>
  <div class="card-body">
    Body
  </div>
  <div class="card-footer">
    Footer
  </div>
</div>

https://getbootstrap.com/docs/4.1/components/card/

Migration description: https://getbootstrap.com/docs/4.1/migration/

Upvotes: 16

Shiladitya
Shiladitya

Reputation: 12181

Here you go with fiddle https://jsfiddle.net/nh2g8mLb/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">  
    <div class="panel panel-default">
        <div class="panel-heading"> SignUp to the system </div>
        <div class="panel-body">
            Test Panel
        </div>
        <div class="panel-footer"> You have 3 More attempts left! </div>
    </div>
</div>

Upvotes: 2

Related Questions