02.06.2015 Views

Bootstrap Tutorial

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

CHAPTER<br />

31<br />

<strong>Bootstrap</strong> Panels<br />

This chapter will discuss about <strong>Bootstrap</strong> panels. Panel component are used when you want to put your<br />

DOM component in a box. To get a basic panel, just add class .panel to the element. Also add class .paneldefault<br />

to this element as shown in the following example:<br />

<br />

<br />

This is a Basic panel<br />

<br />

<br />

Panel with heading<br />

There are two ways to add panel heading:<br />

Use .panel-heading class to easily add a heading container to your panel.<br />

Use any - with a .panel-title class to add a pre-styled heading.<br />

Following example demonstrates both the ways:<br />

<br />

<br />

Panel heading without title<br />

<br />

<br />

Panel content<br />

<br />

<br />

<br />

<br />

<br />

Panel With title<br />

<br />

TUTORIALS POINT<br />

Simply Easy Learning

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!