Bootstrap is a powerful front-end framework for faster and easier web development. Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites.
Inside the container, the .row class is used to contain the grid columns. Rows should always be placed inside of a container (.container or .container-fluid) to ensure
proper spacing (between page content and the edge of the browser).
The Bootstrap .row uses negative margins (-15px) to counteract the padding (15px) of the container. The end result is no visual spacing (margin or padding) on the
sides of the row within the container. There are several reasons why the “negative margin” approach is used in Bootstrap.
All grid systems have spacing or “gutters” around columns. In the case of Bootstrap, the gutter is created using padding of 15px around each column. The effective
gutter displayed between neighboring columns in 30px. The outer columns (leftmost & rightmost) need to have 1/2 of the gutter (15px) on the outside to keep spacing
consistent.
The relationship between .container and .row is made complete with columns (col-*). Each row is divided horizontally using Bootstrap’s column classes col-*.
Bootstrap has a 12-unit grid (instead of 10, 16, etc..) is that 12 evenly divides into 6 (halves), 4 (quarters) and 3 (thirds). This makes adapting to a variety of
layouts much easier. Bootstrap’s grid columns are identified by different col-(breakpoint)-(units) CSS classes. So for example, col-md-3 would be a column that takes up 3 of the 12 units (or 25%) across in a row.
Tables can be easily made with basic html tag and specific classes provided in Bootstrap 3. You can make table with Striped rows, bordered table, hover rows, condensed
table and responsive table using their specific classes for right results. Read more about Bootstrap 3 tables here.
Yes we can make images responsive by adding class .img-responsive which in turn applies CSS properties with max-width(100%) as well as height (auto) for covering parent element.
A Bootstrap tooltip is a small pop up that appears when user places the mouse pointer over an element such as link or buttons to provide hint or information about the element being hovered.
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
Via data attributes : To add a tooltip, add data-toggle = "tooltip" to an anchor tag. The title of the anchor will be the text of a tooltip.
Ex : <a href="#" data-toggle="tooltip" title="Sample tooltip"> Mouse Hover over </a>
The bootstrap popover plugin is very similar to tooltips. To create a popover, add the data-toggle="popover" attribute to an element and the title attribute to
specify the header text of the popover, the data-content attribute to specify the text that should be displayed inside the popover's body.
Glyphicons are icon fonts which you can use in your web projects. Glyphicons Halflings are not free and require licensing, however their creator has made them available for Bootstrap projects free of cost.
To use the icons, simply use the following code just about anywhere in your code. Leave a space between the icon and text for proper padding.
The ".collapse" class is used to specify the collapsible element. Flexible plugin that utilizes a handful of classes for easy toggle behavior. Click on the button to
toggle between showing and hiding content.
.collapse hides content
.collapsing is applied during transitions
.collapse.in shows content
You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.
Media objects in Bootstrap allow you to put media object like image, video or audio to the left or right of the content blocks. Media element can be created using the
class .media and the source is identified in using the class .media-object. Media-objects are of two types,They are :
The Carousel plugin is used to add a slider to your site. It is useful in condition where you want to display huge amount of contents within a small space on the web pages. Some of the standard carousel includes are :
Form control in bootstrap automatically recieves the global styling.All the textual <input>, <textarea>, and <select> elements with class .form-control have a specific width of 100%.
There are two types of layouts available in Bootstrap
Fluid Layout (.container-fluid) : In the Fluid layout, the width is 100 %, this layout changes its width as you are browsing content.
Fixed Layout (.container) : In the Fixed layout, the width is adjusted in pixels, it changes in parts (not continuous), and size will be updated at specified intervals.
Both the layouts are responsive, so any of the above two containers can be chosen to create a responsive design website.
Normalize in Bootstrap refers to the phenomenon where the browsers can be made to display elements in a consistent manner. It is also referred to as browser reset.
The ScrollSpy plugin is for automatically updating nav targets based on scroll position. In its basic implementation, as you scroll, you can add <code>.active </code> classes to the navbar based on the scroll position. The dropdown sub items will be highlighted as well.
Via Data attributes : To easily add scrollspy behavior to your topbar navigation, add <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.
The Bootstrap well component provides a quick way to apply a simple inset effect to an element. The class .well is used with <div> element to add well.
<div class="container">
<div class="well">Hi! I am a Well.</div>
</div>
The Affix plugin allows an <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.
The bootstrap affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles, with the exception of position: fixed; on the .affix class.
View More : https://www.freetimelearning.com/bootstrap/bootstrap-affix.php
Panel components are used when you want to put your DOM component in a box. To get a basic panel, just add class . In most basic form the panel component applies some border and padding around the content.
Total bootstrap panels are : Basic Pnael, Panel with Heading, Contextual Alternatives, panel with Footer, Panel with tables, Panel with list groups.
Example :
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-body">Hi this is basic panel !</div>
</div>
</div>
There are three ways of toggling the dropdown plugin’s hidden content in Bootstrap :
With data attributes : Add data-toggle = “dropdown” to some button or link to toggle a dropdown. For example,
<div class = "dropdown">
<a data-toggle = "dropdown" href = "#"> Dropdown trigger </a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>
With JavaScript : Following method is used for calling the dropdown toggle via JS:
$('.dropdown-toggle').dropdown()
Using data-target attribute in place of 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>
The .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.
Bootstrap uses very fewer preprocessors as it supports less and it allows the designing and development for both mobile and desktop. On the other hand, Foundation supports sass processors and it is used only for mobile UI designing.
