Getting started
Introduction
Important globals
HTML5 doctype
Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky and incomplete styling.
<!doctype html>
<html lang="en">
...
</html>
Responsive meta tag
Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">
Customize
Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.
Sass
Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
File structure
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Layout
Breakpoints
Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
Core concepts
- Breakpoints are the building blocks of responsive design.
- Use media queries to architect your CSS by breakpoint.
- Mobile first, responsive design is the goal.
Available breakpoints
These breakpoints can be customized if you’re using our source Sass files.
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | <576px |
| Small | sm
|
≥576px |
| Medium | md
|
≥768px |
| Large | lg
|
≥992px |
| Extra large | xl
|
≥1200px |
| Extra extra large | xxl
|
≥1400px |