HI WELCOME TO SIRIS

Bootstrap panels

In this we will discuss Bootstrap panels component. 

Bootstrap tutorial for beginners

ClassPurpose
panelCreates a panel
panel-defaultApplies default 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-headingCreates a panel heading
panel-titleFor styling the title in the panel heading
panel-bodyCreates a panel body
panel-footerCreates a panel footer

Creating a panel with header, body and footer 
bootstrap panel example code 

<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 :  
bootstrap panel with table 

<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>