How to create Panels in Bootstrap

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 26966 red flag
Rating: 5 out of 5  
 1 vote(s)

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.
Recommendation
Read How to create Menus in Bootstrap before this article.

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-primarypanel-successpanel-warningpanel-infopanel-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
We have already seen creating Tables in Bootstrap. Now lets put those tables in the panels.
<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.


Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Posted by: Jayakumars on: 6/15/2014 | Points: 25
hi
Goud
Nice Article. How to set action for this Search then how to set menu navigation using Master page
can u send me my email id : kumaraspcode2009@gmail.com
Posted by: Goud.Kv on: 6/16/2014 | Points: 25
Hello Kumar,

You can set action for search through button controller from server side. This is just the CSS and JavaScript that we are using in Bootstrap.
Just place the menu in the master page to make it use in master page.
Currently I didn't prepared any code for such things but if i do, I'll send it to you for sure.

Thanks & Regards,
Krishna.

Login to post response

Comment using Facebook(Author doesn't get notification)