Bootstrap panels

Suggested Video Tutorials
Part 28 - Bootstrap navbar component
Part 29 - Bootstrap breadcrumbs
Part 30 - Bootstrap pager and pagination



In this video we will discuss Bootstrap panels component.

Class	Purpose
panel	Creates a panel
panel-default	Applies defulat contextual styling to the panel. Other contextual state classes like panel-primary, panel-success, panel-info, panel-warning and panel-danger can also be used
panel-heading	Creates a panel heading
panel-title	For styling the title in the panel heading
panel-body	Creates a panel body
panel-footer	Creates a panel footer

Creating a panel with header, body and footer

<div class="panel panel-default">

    <div class="panel-heading">

        <h3 class="panel-title">What is bootstrap</h3>

    </div>

    <div class="panel-body">

        Bootstrap is a free, open-source and is the most popular HTML, CSS, and JavaScript framework developed by twitter for creating responsive web applications. It includes HTML and CSS based design templates for common user interface components like Buttons, Dropdowns, Typography, Tabs, Forms, Tables, Navigations, Alerts, Modals, Accordion, Carousel etc. along with optional JavaScript extensions. Bootstrap framework is based on open standards - HTML, CSS and JavaScript. This means bootstrap can be used with any server side technology and any platform. You can use it with any web application built with any server side technology like ASP.NET, JAVA, PHP etc.

    </div>

    <div class="panel-footer">

        PragimTech

    </div>

</div>

Please note : You can also create panels without header and footer.

Tables inside Panels : 

<div class="panel panel-default">

    <div class="panel-heading">

        <h3 class="panel-title">Panel Heading</h3>

    </div>

    <div class="panel-body">

        Panel Body Content

    </div>

    <table class="table">

        <thead>

            <tr>

                <th>Id</th>

                <th>First Name</th>

                <th>Last Name</th>

                <th>Email</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>Mary</td>

                <td>Kay</td>

                <td>markay@email.com</td>

            </tr>

            <tr>

                <td>2</td>

                <td>John</td>

                <td>Underwood</td>

                <td>johnunderwood@email.com</td>

            </tr>

            <tr>

                <td>3</td>

                <td>Sam</td>

                <td>Macintosh</td>

                <td>sammacintosh@mail.com</td>

            </tr>

        </tbody>

    </table>

    <div class="panel-footer">

        Panel Footer

    </div>

</div>