Bootstrap is the CSS technology developed by Twitter. It comes with predefined styles that are used straightly to make our webpage nice look and feel.
Bootstrap contains a bunch of CSS code which is usable at any place.
Introduction
Please read
Bootstrap Introduction if you are new to Bootstrap.
In some webpages, there is a need of placing content with in panels to make them separate or look effective. Bootstrap comes with predefined
panel classes which are used to satisfy our needs.
Objective
In this article, we are going to see different types of panels in
bootstrap.css, that are used in our webpage.
Using Bootstrap code
bootstrap.css has a lot of CSS regarding panels which are predefined and easily usable. Lets see one by one,
Getting Started with Panels
First we are going to create a simple panel with a text in it. See the below code snippet,
<div class="panel panel-default">
<div class="panel-body">This text is in Panel</div>
</div>This will display a panel in your browser like below
We can also use panel-primary, panel-success, panel-warning, panel-info, panel-danger classes for different colors of panels.
Also we can add Heading to the panel as following,
<div class="panel panel-primary">
<div class="panel-heading"><p class="panel-title">Panel Heading</p></div>
<div class="panel-body">This text is in Panel</div>
</div>'
panel-heading' is the class for Heading and
panel-body is for description and everything that goes under panel.
If you run this code you will see the following output in your browser
We can also put the media elements such as Images in the panel. Take a look at below example for that
<div class="panel panel-success">
<div class="panel-heading"><p class="panel-title">DotNetFunda</p></div>
<div class="panel-body">
<div class="media">
<a href="#" class="pull-left">
<img src="/DotNetFunda.jpg" class="media-object" width="100" height="80" alt="Sample Image">
</a>
<div class="media-body">
<p>
DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies
aimed for beginners and intermediate level professionals. By following our different sections regularly,
we hope you will soon become one of the 'Most Valuable' professional and start shining in your career.
</p>
</div>
</div>
</div>
</div>In the above code we are adding Image with some Description as we done in the previous chapter
Images in Bootstrap. Run the above code in your browser and see the result. It looks like below,
Panels with Footers
We can include footer in the panel by using panel-footer predefined class of Bootstrap.
Observe the below example of adding footer with some buttons to the Panel.
<div class="panel panel-primary">
<div class="panel-heading"><p class="panel-title">DotNetFunda</p></div>
<div class="panel-body">DotNetFunda is the website for those who are looking for .Net Tips and Tricks.</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<a href="#" class="btn btn-warning">Back</a>
<a href="http://dotnetfunda.com" class="btn btn-success">DotNetFunda</a>
<a href="#" class="btn btn-info">Next</a>
</div>
</div>
</div>Now, if you run this code you will see the following result in your browser
We can also group the buttons in the Footer of the Panel.
Lets try that with below code,
<div class="panel panel-danger">
<div class="panel-heading"><p class="panel-title">KidsFunda</p></div>
<div class="panel-body">Kids Funda is designed for Kids to make them learn easily with some fun.</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<div class="btn-group">
<a href="#" class="btn btn-warning">Back</a>
<a href="http://kidsfunda.com" class="btn btn-success">KidsFunda</a>
<a href="#" class="btn btn-info">Next</a>
</div>
</div>
</div>
</div>In the above code, we have used
btn-group class to group the buttons as in the below output
And we can add any other elements in the Footer of the Panel. Example of adding Search box is below
<div class="panel panel-warning">
<div class="panel-heading"><p class="panel-title">DotNetFunda</p></div>
<div class="panel-body">DotNetFunda is the website for those who are looking for .Net Tips and Tricks.</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<a href="#" class="btn btn-info"><span class="glyphicon glyphicon-search"></span> Search</a>
</div>
</div>
</div>
</div>
</div>In the above code we are adding a Textbox grouped with Search button to the Footer. That looks like below in your browser
Tables inside the Panel
<div class="panel panel-primary">
<!-- Panel content goes here -->
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<h2>This is the Panel body.</h2>
</div>
<!-- Table in the Panel -->
<div>
<table class="table table-bordered">
<thead>
<tr>
<th>S/no.</th>
<th>Name</th>
<th>Details</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>DotNetFunda</td>
<td>Fundamentals of .Net</td>
<td>support@dotnetfunda.com</td>
</tr>
<tr>
<td>2</td>
<td>ItFunda</td>
<td>Training of Microsoft Technologies</td>
<td>support@itfunda.com</td>
</tr>
<tr>
<td>3</td>
<td>KidsFunda</td>
<td>Learning Fundamentals for Kids</td>
<td>support@kidsfunda.com</td>
</tr>
</tbody>
</table>
</div>
</div>In the above code we have placed a table inside the panel.
After running the above code, you will meet the following output
A Panel with Table in it looks very nice. Isn't it !!
Lists inside the Panels
We have already seen creating
Lists in Bootstrap. we can put Lists inside the Panel and make them more effective.
Go through the below example
<div class="panel panel-primary">
<!-- Panel content goes here -->
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<h4>This is the Panel body.</h4>
</div>
<!-- List group in the Panel -->
<div class="list-group">
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-home"></span> Home <span class="badge">512</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-heart"></span> Favourites <span class="badge">45</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-camera"></span> Photos <span class="badge">55</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-music"></span> Music <span class="badge">266</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-film"></span> Videos <span class="badge">84</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-trash"></span> Trash <span class="badge">1</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-cog"></span> Settings <span class="badge"></span>
</a>
</div>
</div>Above code is the List of some Items that sit inside the Panel.
The output of the above code will be,
Similarly, you can place so many elements like Dropdowns, Radio buttons, Checkboxes etc. in the Panel.
Conclusion
In this article we have seen Panels and placing elements in panels using Bootstrap predefined CSS. Hope you understand. If you have any doubts in this topic, please ask below.
Thanks for reading.