Panel in Bootstrap

A panel is a bordered and stylish box having some padding around its content and sections like heading, body and footer.

Code Example:

<!DOCTYPE html>

<html lang=”en”>

<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>Bootstrap Panel Example</title>

<link href=”css/bootstrap.min.css” rel=”stylesheet”>  <!—Link to bootstrap CSS File –>

</head>

<body>

<div class=”container”>

<div class=”row”> <!—row start –>

<div class=”col-md-4″>

<div class=”panel panel-primary”> <!—panel in blue border –>

<div class=”panel-heading”>About Panel</div>  <!—heading tag not required here  –>

<div class=”panel-body”> <!—panel main content area –>

A panel is a bordered and stylish box having some padding around its content and sections like heading, body and footer.

</div>

<div class=”panel-footer”>Learn More…</div>

</div>

</div>

<div class=”col-md-4″>

<div class=”panel panel-danger”>

<div class=”panel-heading”>About Panel</div>

<div class=”panel-body”>

A panel is a bordered and stylish box having some padding around its content and sections like heading, body and footer.

</div>

<div class=”panel-footer”>Learn More…</div>

</div>

</div>

<div class=”col-md-4″>

<div class=”panel panel-success”>

<div class=”panel-heading”>About Panel</div>

<div class=”panel-body”>

A panel is a bordered and stylish box having some padding around its content and sections like heading, body and footer.

</div>

<div class=”panel-footer”>Learn More…</div>

</div>

</div>

</div> <!– row end –>

</div>

</body>

</html>

 

Output:

Leave a Reply

Your email address will not be published.

Enjoy the tutorial? Please spread the word :)

Follow by Email
Facebook
Facebook
Google+2k
Google+
http://hirdeshbhardwaj.com/2017/04/21/panel-in-bootstrap
YouTube61
YouTube