Bootstrap with CSS
- Bootstrap - Responsive utilities
- Bootstrap - Helper Classes
- Bootstrap - Images
- Bootstrap - Buttons
- Bootstrap - Forms
- Bootstrap - Tables
- Bootstrap - Code
- Bootstrap - Typography
- Bootstrap - CSS Overview
- Bootstrap - Grid System
Bootstrap Layout Components
- Bootstrap - Wells
- Bootstrap - Panels
- Bootstrap - List Group
- Bootstrap - Media Object
- Bootstrap - Progress Bars
- Bootstrap - Alerts
- Bootstrap - Thumbnails
- Bootstrap - Page Header
- Bootstrap - Jumbotron
- Bootstrap - Badges
- Bootstrap - Labels
- Bootstrap - Pagination
- Bootstrap - Breadcrumb
- Bootstrap - Navbar
- Bootstrap - Navigation Elements
- Bootstrap - Input Groups
- Bootstrap - Button Dropdowns
- Bootstrap - Button Groups
- Bootstrap - Dropdowns
- Bootstrap - Glyphicons
Bootstrap Plugins
- Bootstrap - Affix Plugin
- Bootstrap - Carousel Plugin
- Bootstrap - Collapse Plugin
- Bootstrap - Button Plugin
- Bootstrap - Alert Plugin
- Bootstrap - Popover Plugin
- Bootstrap - Tooltip Plugin
- Bootstrap - Tab Plugin
- Bootstrap - Scrollspy Plugin
- Bootstrap - Dropdown Plugin
- Bootstrap - Modal Plugin
- Bootstrap - Transition Plugin
- Bootstrap - Plugins Overview
Bootstrap Demos
- Bootstrap - featured Demo
- Bootstrap - Icons Demo
- Bootstrap - Social Icons Demo
- Bootstrap - Calendar Demo
- Bootstrap - Map Demo
- Bootstrap - Caption Demo
- Bootstrap - Tabbed slider Demo
- Bootstrap - Ajax Demo
- Bootstrap - Admin Interface Demo
- Bootstrap - Alert Demo
- Bootstrap - Time line Demo
- Bootstrap - Slider Demo
- Bootstrap - Material Design Demo
- Bootstrap - Blog Demo
- Bootstrap - Navigation Demo
- Bootstrap - Responsive Demo
- Bootstrap - Images Demo
- Bootstrap - Buttons Demo
- Bootstrap - Form Demo
- Bootstrap - Table Demo
- Bootstrap - Grid Demo
Bootstrap Useful Resources
- Bootstrap - Discussion
- Bootstrap - Useful Resources
- Bootstrap - Quick Guide
- Bootstrap - Questions and Answers
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Bootstrap - Helper Classes
This chapter discusses some of the helper classes in Bootstrap that might come in handy.
Close icon
Use the generic close icon for dismissing content pke modals and alerts. Use the class close to get the close icon.
<p>Close Icon Example <button type = "button" class = "close" aria-hidden = "true"> × </button> </p>
Carets
Use carets to indicate dropdown functionapty and direction. To get this functionapty use the class caret with a <span> element.
<p>Caret Example<span class = "caret"></span></p>
Quick Floats
You can float an element to the left or right with class pull-left or pull-right respectively the following example demonstrates this.
<span class = "pull-left">Quick Float to left</span> <span class = "pull-right">Quick Float to right</span>
To apgn components in navbars with utipty classes, use .navbar-left or .navbar-right instead. See thefor details.
Center Content Blocks
Use class center-block to set an element to center.
<span class = "row"> <span class = "center-block" style = "width:200px; background-color:#ccc;"> This is an example for center-block </span> </span>
Clearfix
To clear the float of any element, use the .clearfix class.
<span class = "clearfix" style = "background: #D8D8D8;border: 1px sopd #000; padding: 10px;"> <span class = "pull-left" style = "background:#58D3F7;"> Quick Float to left </span> <span class = "pull-right" style = "background: #DA81F5;"> Quick Float to right </span> </span>
Showing and Hiding Content
You can force an element to be shown or hidden (including for screen readers) with the use of classes .show and .hidden.
<span class = "row" style = "padding: 91px 100px 19px 50px;"> <span class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;"> This is an example for show class </span> <span class = "hidden" style = "width:200px; background-color:#ccc;"> This is an example for hide class </span> </span>
Screen Reader Content
You can hide an element to all devices except screen readers with the class .sr-only.
<span class = "row" style = "padding: 91px 100px 19px 50px;"> <form class = "form-inpne" role = "form"> <span class = "form-group"> <label class = "sr-only" for = "email">Email address</label> <input type = "email" class = "form-control" placeholder = "Enter email"> </span> <span class = "form-group"> <label class = "sr-only" for = "pass">Password</label> <input type = "password" class = "form-control" placeholder = "Password"> </span> </form> </span>
Here we can see that the label of both the input types is assigned the class sr-only, hence labels will be visible to only screen readers.
Advertisements