13 articles Bootstrap CSS Framework

Twitter Bootstrap CSS Framework

Bootstrap Labels and Badges

Creating Inline Labels Inline labels are generally used to indicate some valuable information on the web pages such as important notes, warning messages, etc. The following example will show you how to create inline labels using the Twitter Bootstrap Example     <h1>Bootstrap heading <span class=”label label-default”>New</span></h1>     <h2>Bootstrap heading <span class=”label label-default”>New</span></h2>     <h3>Bootstrap heading…

Bootstrap Accordion

Accordion menus or navigation are widely used on the website to manage large content and navigation lists. The following example will show you how to build a simple accordion widget using Twitter Bootstrap collapsible components: Example <div id=”accordion” class=”panel-group”>         <div class=”panel panel-default”>             <div class=”panel-heading”>                 <h4 class=”panel-title”>                     <a data-toggle=”collapse” data-parent=”#accordion” href=”#collapseOne”>What is…

Bootstrap Breadcrumbs and Pagination

Creating Breadcrumbs with Bootstrap A breadcrumb is a navigation scheme that indicates the user’s location in a website or web application. Breadcrumb navigation can greatly enhance the accessibility of websites having large number of pages. This is a simple example of creating breadcrumbs with Bootstrap. <ul class=”breadcrumb”> <li><a href=”#”>Home</a></li> <li><a href=”#”>Products</a></li> <li class=”active”>Accessories</li>  </ul> The…

Bootstap Navigation

Bootstrap Nav Components Bootstrap provides an easy way to create basic nav components like as tabs and pills. All the Bootstrap’s nav components—tabs and pillss—share the same base markup and styles through the .nav class Creating Basic Tabs with Bootstrap The following example will show you how to create a basic tab component using Bootstrap.…

Bootstrap Images and Icon

Images and Icon are very common in modern web design. So styling images and placing it properly on the web pages is very important for improving the user experience. Using the Bootstrap built-in classes you can easily style images such as making the round cornered or circular images, or give them effect like thumbnails. .img-thumbnail:…

Bootstrap Buttons

Bootstrap button Anything that is given a class of .btn will inherit the default look of a gray button with rounded corners. However Bootstrap provides some options to style buttons, which are summarized in the following table: Class Description Btn Default/ Standard button. btn-primary Provides extra visual weight and identifies the primary action in a…