Origin
Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden. According to Twitter developer Mark Otto.
What is Bootstrap?
• Bootstrap is a free front-end framework for faster and easier web development • Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins • Bootstrap also gives you the ability to easily create responsive designs
Defining Proper Media Queries
Bootstrap has clearly defined breakpoints for different kinds of devices, specified by using CSS media queries. Bootstrap's responsive CSS adjusts to phones, tablets, and desktops The following are the breakpoint categories used for the different types of devices...
Bootstrap Grid System
Bootstrap's grid system allows up to 12 columns across the page. Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
If you do not want to use all 12 column individually, you can group the columns together to create wider columns:
span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
Bootstrap's Default Settings
Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the body and all paragraphs. In addition, all elements have a bottom margin that equals half their computed line-height (10px by default).
Where to Get Bootstrap?
1. Add the HTML5 doctype Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set: 2. Bootstrap 3 is mobile-first Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework. 3. Containers Bootstrap also requires a containing element to wrap site contents.
About responsive Bootstrap
Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.
- Modify the width of column in our grid
- Stack elements instead of float wherever necessary
- Resize headings and text to be more appropriate for devices
- Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.
and responsive design comes standard with a 1170 pixel wide, grid layout
The CSS[edit] Bootstrap provides a set of stylesheets that provide basic style definitions for all key HTML components. These provide a uniform, modern appearance for formatting text, tables and form elements. Re-usable components[edit] In addition to the regular HTML elements, Bootstrap contains other commonly used interface elements. These include buttons with advanced features (e.g. grouping of buttons or buttons with drop-down option, make and navigation lists, horizontal and vertical tabs, navigation, breadcrumb navigation, pagination, etc.), labels, advanced typographic capabilities, thumbnails, warning messages and a progress bar. The components are implemented as CSS classes, which must be applied to certain HTML elements in a page. JavaScript components[edit] Bootstrap comes with several JavaScript components in the form of jQuery plugins. They provide additional user interface elements such as dialog boxes, tooltips, and carousels. They also extend the functionality of some existing interface elements, including for example an auto-complete function for input fields. In version 2.0, the following JavaScript plugins are supported: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel and Typeahead.