Bootstrap

Bootstrap is an open-source front-end toolkit that provides ready-made CSS and JavaScript components, such as navbars, buttons, modals and forms, plus a responsive grid system. It was created at Twitter and released publicly in 2011.

Why it matters

Bootstrap lets small teams ship a consistent, responsive interface without designing every component. Its grid divides a row into 12 columns that rearrange at breakpoints, and its documentation covers accessibility basics for many widgets. Customization is done through Sass variables or CSS variables.

The trade-off is recognizability: untouched Bootstrap sites look alike, and loading the full stylesheet includes rules you never use.

Example

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">Left</div>
    <div class="col-12 col-md-6">Right</div>
  </div>
</div>

On phones each column fills the full width. From the md breakpoint upward, the two columns sit side by side at 50 percent each.

Common mistakes

• Overriding styles with long selectors and !important instead of changing the Sass variables.
• Loading the whole library, including JavaScript, when only the grid is used.
• Nesting columns without wrapping them in a new .row, which breaks gutters.
• Mixing Bootstrap versions; class names changed between major releases.

Related

• CSS grid
• Responsive design
• Breakpoint
• Sass and SCSS

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.