Responsive design
Enabling responsive features Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the of your document. If you’ve compiled Bootstrap from the Customize page, you need...
Category: Bootstrap Basics
Bootstrap Basics
Fluid layout
Create a fluid, two-column page with <div class=”container-fluid”>—great for applications and docs. Example
Fixed layout
Provides a common fixed-width (and optionally responsive) layout with only <div class=”container”> required.
Fluid nesting
Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.
Fluid offsetting
Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns. Example
Fluid grid system
Live fluid grid example The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions...
Nesting columns
To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to...
Offsetting columns
Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.
Default Grid System
Live grid example The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and...
Basic HTML Template
Normal Webpage Output Hello, world! Webpage with Bootstrap Output Hello, world! With Bootstrap, we include the link to the CSS stylesheet and the JavaScript
Bootstrap File Structure
The Bootstrap download includes three folders: css, js, and img. For simplicity, add these to the root of your project. Minified versions of the CSS and JavaScript are also included. It is not necessary...
What Is Bootstrap?
Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript...