Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.