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:

12 thoughts on “Panel in Bootstrap

  1. A lot of thanks for all your valuable hard work on this website. My aunt really loves managing internet research and it is simple to grasp why. Almost all learn all relating to the compelling mode you present invaluable things by means of your blog and even boost contribution from the others about this issue while our girl is certainly becoming educated a lot of things. Enjoy the rest of the year. You have been conducting a first class job.

  2. I am usually to running a blog and i actually admire your content. The article has really peaks my interest. I am going to bookmark your web site and preserve checking for brand spanking new information.

  3. My husband and i ended up being very relieved when Jordan could deal with his reports through the ideas he obtained out of your web page. It is now and again perplexing just to possibly be handing out procedures that many others might have been selling. We realize we need the website owner to appreciate because of that. All the illustrations you have made, the simple website menu, the friendships you assist to engender – it’s everything wonderful, and it is letting our son and our family reckon that that concept is pleasurable, which is extraordinarily essential. Many thanks for the whole lot!

  4. Oh my goodness! a tremendous article dude. Thank you Nonetheless I’m experiencing difficulty with ur rss . Don抰 know why Unable to subscribe to it. Is there anybody getting an identical rss drawback? Anyone who knows kindly respond. Thnkx

  5. I needed to put you that very small remark so as to thank you so much once again on the fantastic tactics you’ve shared in this article. This is so particularly generous of you to make unhampered what many individuals could possibly have made available for an e-book to get some money for their own end, principally now that you could possibly have tried it in case you desired. These tricks in addition acted to become easy way to know that other people have similar dream the same as my very own to understand lots more in terms of this issue. Certainly there are numerous more enjoyable periods in the future for folks who browse through your blog.

  6. Youre so cool! I dont suppose Ive learn anything like this before. So nice to find any individual with some unique thoughts on this subject. realy thanks for beginning this up. this web site is one thing that is needed on the net, someone with somewhat originality. useful job for bringing something new to the internet!

  7. I wish to show some appreciation to this writer for rescuing me from this situation. Because of surfing around throughout the the web and obtaining recommendations which are not helpful, I believed my entire life was over. Living without the strategies to the problems you have sorted out as a result of your good post is a serious case, as well as those which might have adversely damaged my entire career if I had not encountered the blog. Your natural talent and kindness in dealing with everything was crucial. I don’t know what I would have done if I had not come upon such a point like this. I am able to at this point look ahead to my future. Thanks a lot so much for your professional and amazing help. I won’t hesitate to recommend the blog to anybody who requires guide about this situation.

  8. I simply wanted to construct a simple word to be able to thank you for all the pleasant hints you are writing on this website. My time-consuming internet look up has now been compensated with extremely good information to go over with my close friends. I would express that most of us readers actually are very much fortunate to exist in a wonderful site with very many outstanding people with very beneficial points. I feel really fortunate to have seen your entire web site and look forward to many more thrilling moments reading here. Thanks once more for all the details.

  9. I must show some thanks to this writer for bailing me out of this particular problem. After scouting through the online world and seeing recommendations that were not beneficial, I assumed my life was over. Living without the solutions to the issues you’ve resolved as a result of your entire posting is a crucial case, as well as those that might have negatively damaged my entire career if I had not discovered your site. The talents and kindness in handling a lot of things was tremendous. I don’t know what I would’ve done if I hadn’t come upon such a step like this. It’s possible to at this point look forward to my future. Thanks for your time so much for your skilled and results-oriented guide. I will not think twice to refer your web page to anybody who needs and wants support on this problem.

  10. I am only writing to let you understand of the remarkable discovery my wife’s daughter developed studying yuor web blog. She mastered such a lot of pieces, including what it’s like to possess an excellent coaching heart to let other individuals very easily gain knowledge of some impossible matters. You truly did more than our expectations. I appreciate you for churning out the practical, healthy, revealing and in addition cool guidance on this topic to Janet.

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/
YouTube31
YouTube