<input>, <textarea>, and <select> elements with class .form-control have a specific width of 100%..pagination class<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul><div class="progress">
<div class="progress-bar" style="width: 50%;">
<span class="sr-only">50% Complete</span>
</div>
</div><code>.active </code> classes to the navbar based on the scroll position. The dropdown sub items will be highlighted as well.<code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>$('body').scrollspy({ target: '#navbar-example' })<div class="container">
<div class="well">Hi! I am a Well.</div>
</div><div> element to become affixed (locked) to an area on the page. This is often used with navigation menus or social icon buttons, to make them "stick" at a specific area while scrolling up and down the page. .affix, .affix-top, and .affix-bottom. You must provide the styles, with the exception of position: fixed; on the .affix class..collapse class shows the presence of a collapsible element. .collapse conceals the content.collapse .show depicts the content.collapsing is applied at the time of content transition.<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-body">Hi this is basic panel !</div>
</div>
</div>.alert and one of the four contextual classes. .alert-dismissable to the above <div> class.<button> element with the data-dismiss = “alert” data attribute.<div class="alert alert-success alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Free Time Learning is successfully updated !
</div>​<form> element<div> with class .form-group. This is required to achieve optimum spacing.form-control to all texturl <input> , <textarea> , and <select> elements<div class = "dropdown">
<a data-toggle = "dropdown" href = "#"> Dropdown trigger </a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>$('.dropdown-toggle').dropdown()​href=“#” – If the web browser isn’t enabling JavaScript, then it is better to keep links intact. For this, the data-target attribute is preferred over href=“#”. For example,<div class = "dropdown">
<a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/somepage.html">
Dropdown <span class = "caret"></span>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>.media class allows a media object, such as audio, images, or video, to float to the left or right of a content block. For adding article lists or comment threads to an unordered list, we use the .useful class.