Home > DeveloperSection > Articles > Bootstrap Components Part I

Bootstrap Components Part I


Bootstrap Bootstrap 
Ratings:
0 Comment(s)
 3585  View(s)
Rate this:

Bootstrap Components Part I

Previously , I have introduce you about bootstrap in Introduction Bootstrap, now we will discuss the components related with bootstrap .In this article, I’m explaining about bootstrap component

 

 

Start:

Firstly I create a simple project in mvc4.

Open Microsoft Visual Studio >> Click on File >> New >> Project >> Select ASP.NET MVC 4 Web Application

In my sample give the name of app “BootstrapComponent” >> Location >> Click “Ok” >> Select “Empty” Template click “Ok”

Use these three files in your application.

 

 

<link href="@Url.Content("~/Content/bootstrap-3.1.1-dist/css/bootstrap.min.css")" rel="stylesheet" />

<script src="@Url.Content("~/scripts/jquery-2.1.0.min.js")"></script>

<script src="@Url.Content("~/scripts/bootstrap-3.1.1-dist/js/bootstrap.min.js")"></script>     

1:- Bootstrap Button

 

How to Use Bootstrap Button:-

Bootstrap Button use multiple classes like btn-group, btn btn-default,btn btn-primary,btn btn-info,btn btn-success, btn btn-danger,btn btn-warning and much more.

 

A. Button Groups Horizontal Variation:-

Example:

<h1>Use Of Button Group Horizontal Variation</h1>

    <div class="btn-group">

        <button type="button" class="btn btn-default">Button1</button>

        <button type="button" class="btn btn-default">Button2</button>

        <button type="button" class="btn btn-default">Button3</button>

        <button type="button" class="btn btn-default">Button4</button>

    </div>

Result:

Bootstrap Components Part I

 

B. Button Groups Vertical Variation:-

Example:

<h1>Use Of Button Group Vertical Variation</h1>

    <div class="btn-group-vertical">

        <button type="button" class="btn btn-default">Button1</button>

        <button type="button" class="btn btn-default">Button2</button>

        <button type="button" class="btn btn-default">Button3</button>

    </div>

Result:

Bootstrap Components Part I

 

C. Button group toolbar:-

Example:

<h1>Use Of Bootstrap Button Toolbar</h1>

    <div class="btn-toolbar" role="toolbar" style="margin0;">

        <div class="btn-group">

            <button type="button" class="btn btn-default">1</button>

            <button type="button" class="btn btn-default">2</button>

            <button type="button" class="btn btn-default">3</button>

        </div>

        <div class="btn-group">

            <button type="button" class="btn btn-default">4</button>

            <button type="button" class="btn btn-default">5</button>

            <button type="button" class="btn btn-default">6</button>

        </div>

        <div class="btn-group">

            <button type="button" class="btn btn-default">7</button>

        </div>

    </div>

Result:

Bootstrap Components Part I

 

D. Button group Justify:-

Example:

<h1>Use of Button group Justify</h1>

    <div class="btn-group btn-group-justified">

        <div class="btn-group">

            <button type="button" class="btn btn-default">Button1</button>

        </div>

        <div class="btn-group">

            <button type="button" class="btn btn-default">Button2</button>

        </div>

        <div class="btn-group">

            <button type="button" class="btn btn-default">Button3</button>

        </div>

    </div>

Result:

Bootstrap Components Part I

 

E. Button Sizing:-

Example:

<h1>Use of Button Sizing</h1>

    <h4>Large Button</h4>

    <div class="btn-group btn-group-lg">

        <button type="button" class="btn btn-default">Button1</button>

        <button type="button" class="btn btn-default">Button2</button>

        <button type="button" class="btn btn-default">Button3</button>

    </div>

    <h4>Normal Button</h4>

    <div class="btn-group">

        <button type="button" class="btn btn-default">Button1</button>

        <button type="button" class="btn btn-default">Button2</button>

        <button type="button" class="btn btn-default">Button3</button>

    </div>

    <h4>small Button</h4>

    <div class="btn-group btn-group-sm">

        <button type="button" class="btn btn-default">Button1</button>

        <button type="button" class="btn btn-default">Button2</button>

        <button type="button" class="btn btn-default">Button3</button>

    </div>

    <h4>Extra small Button</h4>

    <div class="btn-group btn-group-xs">

        <button type="button" class="btn btn-default">Button1</button>

        <button type="button" class="btn btn-default">Button2</button>

        <button type="button" class="btn btn-default">Button3</button>

    </div>

Result:

Bootstrap Components Part I

 

F. Button with Dropdown:-

Example:

<div class="btn-group">

        <button type="button" class="btn btn-primary" data-toggle="dropdown">Primary</button>

        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

            <span class="caret"></span>

            &nbsp;

        </button>

        <ul class="dropdown-menu" role="menu">

            <li><a href="#">Article</a></li>

            <li class="divider"></li>

            <li><a href="#">Blog</a></li>

            <li class="divider"></li>

            <li><a href="#">Forum</a></li>

            <li class="divider"></li>

            <li><a href="#">Interview</a></li>

        </ul>

    </div>

Result:

Bootstrap Components Part I

 

 

2:- Bootstrap Input Group

 

Bootstrap textbox use input groups for more attractive textbox extends form control after and before or both side use input group with addon.

A. Input Group With addon:

Example:

<h2>use input group with addon</h2>

    <div class="input-group">

        <input type="text" class="form-control">

        <span class="input-group-addon">OK</span>

    </div>

 

Result:

Bootstrap Components Part I

 

3. Bootstrap Tabs

 

Example:

<h1>Use of Bootstrap Tab with Dropdown</h1>

<ul class="nav nav-tabs" role="tablist" data-tabs="tabs" id="tabs">

        <li class="active"><a href="#account" data-toggle="tab">Account</a></li>

        <li><a href="#profile" data-toggle="tab">Profile</a></li>

        <li class="dropdown">

            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Developer Section <span class="caret"></span></a>

            <ul class="dropdown-menu" role="menu">

                <li><a href="#article">Article<span class="badge pull-right">42</span></a></li>

                <li><a href="#blog">Blog<span class="badge pull-right">42</span></a></li>

                <li><a href="#forum">Forum</a></li>

                <li><a href="#interview">Interview</a></li>

            </ul>

        </li>

    </ul>

    <div class="tab-content">

        <div class="row tab-pane active" id="account">

            <h3>Account Section</h3>

        </div>

        <div class="row tab-pane" id="profile">

            <h3>Profile Page</h3>

        </div>

        <div class="row tab-pane" id="article">

            <h3>Article Section</h3>

        </div>

        <div class="row tab-pane" id="blog">

            <h3>Blog Section</h3>

        </div>

        <div class="row tab-pane" id="forum">

            <h3>Forum Section</h3>

        </div>

        <div class="row tab-pane" id="interview">

            <h3>Interview Section</h3>

        </div>

    </div>

 

JavaScript:

 

<script>

    $('#tabs a').click(function (e) {

        e.preventDefault()

        $(this).tab('show')

    })

 

    $('.btn-toggle').click(function () {

        $(this).find('.btn').toggleClass('active');

        if ($(this).find('.btn-success').size() > 0) {

            $(this).find('.btn').toggleClass('btn-success');

        }

 

        $(this).find('.btn').toggleClass('btn-default');

 

    });

 

</script>

Result:

Bootstrap Components Part I

 

4. Bootstrap Pills

 

Example:

<h1>Use Of Bootstrap Pills</h1>

    <br />

    <br />

    <ul class="nav nav-pills">

        <li class="active"><a href="#account" data-toggle="tab">Account</a></li>

        <li><a href="#profile" data-toggle="tab">Profile</a></li>

        <li><a href="#developer" data-toggle="tab">Developer</a></li>

    </ul>

    <div class="tab-content">

        <div class="row tab-pane active" id="account">

            <h3>Account Section</h3>

        </div>

        <div class="row tab-pane" id="profile">

            <h3>Profile Page</h3>

        </div>

        <div class="row tab-pane" id="developer">

            <h3>Developer Page</h3>

        </div>

    </div>

Result:

Bootstrap Components Part I

 

5. Bootstrap Header Menu

 

Example:

<h1>Bootstrap Responsive Header Menu</h1>

    <br />

    <br />

    <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">

        <div class="container">

            <div class="navbar-header">

                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">

                    <span class="sr-only">Toggle Navigation</span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                @Html.ActionLink("Brand""Index""Home"nullnew { @class = "navbar-brand" })

            </div>

            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">

                <ul class="nav navbar-nav">

                    <li class="active">@Html.ActionLink("Home""""")</li>

                    <li>@Html.ActionLink("Article""""")</li>

                    <li>@Html.ActionLink("Blog""""")</li>

                    <li>@Html.ActionLink("Forum""""")</li>

                    <li>@Html.ActionLink("Interview""""")</li>

                    <li class="dropdown">

                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>

                        <ul class="dropdown-menu" aria-labelledby="themes">

                            <li><a href="../default/">Default</a></li>

                            <li class="divider"></li>

                            <li><a href="../amelia/">Amelia</a></li>

                            <li><a href="../cerulean/">Cerulean</a></li>

                            <li><a href="../cosmo/">Cosmo</a></li>

                        </ul>

                    </li>

                </ul>

 

                <ul class="nav navbar-nav navbar-right">

                    <li>@Html.ActionLink("Sign Up""""")</li>

                    <li>@Html.ActionLink("Login""""")</li>

                    <li>

                        <form class="navbar-form navbar-left" role="search">

                            <div class="form-group">

                                <input type="text" class="form-control" placeholder="Search">

                            </div>

                        </form>

                    </li>

                </ul>

            </nav>

        </div>

    </header>

Result:

Bootstrap Components Part I

 

6. Bootstrap Paging

 

Example:

<div class="col-md-6 text-center" style="border1px solid black;">

        <h1>Use of Bootstrap Paging</h1>

        <br />

        <br />

        <p class="well pageno">Page 1</p>

        <p class="pagenolist"></p>

    </div>

 

Here is my JavaScript code:

 

<script>

    $('.pagenolist').bootpag({

        total: 5

    }).on("page"function (event, num) {

        $(".pageno").html("Page " + num);

        $(this).bootpag({ total: 10, maxVisible: 10 });

    });

</script>

Download this JavaScript file

https://raw.githubusercontent.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js

After download this file drag and drop in your page

<script src="@Url.Content("~/scripts/jquery.bootpag.min.js")"></script>

Result:

Bootstrap Components Part I

 

7. Bootstrap Highlight Label

 

Example:

<h1>Available variations for label highlight</h1>

    <br />

    <br />

    <label class="label label-default">Page 1 of 100</label>

    <label class="label label-info">Page 1 of 100</label>

    <label class="label label-primary">Page 1 of 100</label>

    <label class="label label-success">Page 1 of 100</label>

    <label class="label label-warning">Page 1 of 100</label>

    <label class="label label-danger">Page 1 of 100</label>

Result:

Bootstrap Components Part I

 

8. Bootstrap Badges

 

This components use to highlight to unread items.

Example:

<h1>Use of bootstrap Badges</h1>

    <br />

    <a href="#">Inbox <span class="badge">42</span></a>

Result:

Bootstrap Components Part I

 

9. Bootstrap Page Header

 

In a single row use page header inside h1 tag then you use utilize the h1 default small element, as well as other componets .

Example:

<h1 class="text-primary">Use of Bootstrap Page Header</h1>

    <div class="page-header">

        <h1>Mindstick software pvt. ltd.<small>Unleash your Imagination</small></h1>

    </div>

Result:

Bootstrap Components Part I

 

10. Bootstrap Alerts

 

Provide textual message for user you can use alert. Alerts don’t have default class only base class and modifier class.

Example:

<h1>Use of Bootstrap alert</h1>

    <br />

    <br />

    <div class="alert alert-success" role="alert">

      <strong>Success Alert !</strong> You can use alert for show the message

    </div>

    <div class="alert alert-info" role="alert">

      <strong>Info Alert !</strong> You can use alert for show the message

    </div>

    <div class="alert alert-warning" role="alert">

      <strong>Warning Alert !</strong> You can use alert for show the message

    </div>

    <div class="alert alert-danger" role="alert">

      <strong>Danger Alert !</strong> You can use alert for show the message

    </div>

Result:

Bootstrap Components Part I

 

11. Bootstrap Progress Bar

 

Progress bars representing low single digit percentages, as well as 0%,

Example:

<h1>Use of Bootstrap Progress bar</h1>

    <br />

    <br />

    <div class="progress">

        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">

            <span class="sr-only">45% Complete</span>

        </div>

    </div>

JavaScript code is here:

<script>

    var c = 1;

    $(document).ready(function () {

        setInterval(setProgressBarValue,1000);;

    });

    function setProgressBarValue() {

        $('.progress-bar').css('width', c + '%');

        c += 2;

    }

</script>

Result:

Bootstrap Components Part I

 

 

12. Bootstrap Panel with Heading

 

You can use panel sometimes you need to put some paragraph, and othr textual information in a box then use panel component.

Example:

<h1>Use of Bootstrap Panel Component</h1>

    <br />

    <br />

    <div class="panel panel-default">

        <div class="panel-heading">

            <h3 class="panel-title">Popular Tag</h3>

        </div>

        <div class="panel-body">

            <a class="label label-info">Java </a> &nbsp;&nbsp;<a class="label label-info"> jquery </a>&nbsp;&nbsp;<a class="label label-info"> HTML5 </a>&nbsp;&nbsp;<a class="label label-info"> CSS3</a>

        </div>

    </div>

    <div class="panel panel-info">

        <div class="panel-heading">

            <h3 class="panel-title">Popular Tag</h3>

        </div>

        <div class="panel-body">

            <a class="label label-info">Java </a> &nbsp;&nbsp;<a class="label label-info"> jquery </a>&nbsp;&nbsp;<a class="label label-info"> HTML5 </a>&nbsp;&nbsp;<a class="label label-info"> CSS3</a>

        </div>

    </div>

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h3 class="panel-title">Popular Tag</h3>

        </div>

        <div class="panel-body">

            <a class="label label-info">Java </a> &nbsp;&nbsp;<a class="label label-info"> jquery </a>&nbsp;&nbsp;<a class="label label-info"> HTML5 </a>&nbsp;&nbsp;<a class="label label-info"> CSS3</a>

        </div>

    </div>

    <div class="panel panel-success">

        <div class="panel-heading">

            <h3 class="panel-title">Popular Tag</h3>

        </div>

        <div class="panel-body">

            <a class="label label-info">Java </a> &nbsp;&nbsp;<a class="label label-info"> jquery </a>&nbsp;&nbsp;<a class="label label-info"> HTML5 </a>&nbsp;&nbsp;<a class="label label-info"> CSS3</a>

        </div>

    </div>

    <div class="panel panel-warning">

        <div class="panel-heading">

            <h3 class="panel-title">Popular Tag</h3>

        </div>

        <div class="panel-body">

            <a class="label label-info">Java </a> &nbsp;&nbsp;<a class="label label-info"> jquery </a>&nbsp;&nbsp;<a class="label label-info"> HTML5 </a>&nbsp;&nbsp;<a class="label label-info"> CSS3</a>

        </div>

    </div>

    <div class="panel panel-danger">

        <div class="panel-heading">

            <h3 class="panel-title">Popular Tag</h3>

        </div>

        <div class="panel-body">

            <a class="label label-info">Java </a> &nbsp;&nbsp;<a class="label label-info"> jquery </a>&nbsp;&nbsp;<a class="label label-info"> HTML5 </a>&nbsp;&nbsp;<a class="label label-info"> CSS3</a>

        </div>

    </div>

Result:

Bootstrap Components Part I

Thank you for read this article I hope very helpful for you.

 Next Article we explain Bootstrap components - Part2


Don't want to miss updates? Please click the below button!

Follow MindStick