Using the compiled version is easier and faster to use than the source code version — but it’s more difficult to customize. Any change you want to make to a pre-styled element or layout has to be applied with an override to the current styles. A precompiled version of Bootstrap is available in the form of one CSS file and three JavaScript files that can be readily added to any project. The raw form of Bootstrap, however, enables developers to implement further customization and size optimizations.
All thanks to Bootstrap developers – Mark Otto and Jacob Thornton of Twitter, though it was later declared to be an open-source project. Another reason Bootstrap is so popular is that it’s easy to use. It comes bundled with templates for typography, forms, buttons, drop-down menus, navigation, and other interface components. Using these pre-styled what is bootstrap templates, you can add features that enrich the user experience on your site without having to code them from scratch. You might know that we use CSS for styling webpage elements and create classes and assign classes to webpage elements to apply the style to them. Through this, we get rid of writing our own CSS classes to style webpage elements.
Components
To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles. We’ll start with a simple layout created by developer and technical writer Tania Rascia. Building off the basic HTML template provided by Bootstrap, she added a navigation bar, jumbotron header, grid, and glyphicons using the templates bundled in the framework. Since Bootstrap is a 12-column system, you’ll have to specify the number of twelve available columns you wish to span. Say you’d like to create three equal-width columns that are centered on the page across devices at any size.
By using CSS selectors, she was able to apply unique style properties to the HTML elements on her page. The dist/ folder contains everything listed in the precompiled section above. The docs/ folder includes the source code for Bootstrap documentation and examples of Bootstrap usage. The js/ folder contains the source code for Bootstrap JS and the scss/ folder for Bootstrap CSS.
The Complete Guide to CSS Media Queries
Bootstrap uses HTML elements and CSS properties that require
the HTML5 doctype. If you don’t want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network). If you want to download and host Bootstrap yourself, go to
getbootstrap.com,
and follow the instructions there. Responsive web design is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops.