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:

author image

About admin

You Might Also Like...

Table Example in Bootstrap
JavaScript Date and Time
Excel Trim Function

7 Comments

  1. Oh my goodness! Impressive article dude! Many thanks, However I am experiencing
    troubles with your RSS. I don’t know the reason why I am unable to subscribe to it.
    Is there anybody getting identical RSS issues? Anybody who knows the solution can you
    kindly respond? Thanks!!

  2. you are really a just right webmaster. The website loading velocity is amazing.
    It kind of feels that you’re doing any unique trick.
    Also, The contents are masterpiece. you have done a great task on this topic!

  3. I am not certain the place you’re getting your information,
    but good topic. I must spend a while learning more or working out more.
    Thank you for great info I was in search of this info for my mission.

  4. Excellent post. I was checking constantly this weblog annd I am impressed!

    Extremely useful information specifically the remaining
    section 🙂 I deal woth such information much. I used to
    be looking for this particular info for a very lengthy
    time. Thanks and best of luck.

  5. Thanks for finally writing about >Panel in Bootstrap – Hirdesh
    Bhardwaj <Liked it!

  6. Hi there, of course this piece of writing is truly good and I have learned lot of things from it on the topic of blogging.

    thanks.

Leave a Reply

Your email address will not be published.

Enjoy the tutorial? Please spread the word :)

Follow by Email
Facebook
Facebook
YouTube94
YouTube