Getting Started

Getting Started#

Bootstrap is the world’s most popular framework for building responsive, mobile-first websites and applications. It provides a comprehensive collection of pre-built components, utilities, and a powerful grid system that makes web development faster and more efficient.

👉 New to App-Generator? Sign IN with GitHub or Generate Web Apps in no time (free service).

Installation Methods#

1. CDN (Quickest Method)#

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Project</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- Your content here --> <!-- Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

2. Package Manager (NPM)#

# Install Bootstrap npm install bootstrap # Install dependencies npm install @popperjs/core

  1. Source Files Download

Download the compiled CSS and JS files from the official Bootstrap website and include them in your project:

<link href="/css/bootstrap.min.css" rel="stylesheet"> <script src="/js/bootstrap.bundle.min.js"></script>

Essential Concepts#

1. Grid System#

<div class="container"> <div class="row"> <!-- Equal width columns --> <div class="col">Column 1</div> <div class="col">Column 2</div> <div class="col">Column 3</div> <!-- Specific width columns --> <div class="col-12 col-md-6 col-lg-4">Responsive Column</div> </div> </div>

2. Responsive Breakpoints#

// Bootstrap breakpoints $grid-breakpoints: (  xs: 0,  sm: 576px,  md: 768px,  md: 992px,  lg: 1200px,  xl: 1400px ); // Usage example <div class="col-12 col-md-6 col-lg-4">  <!-- Full width on mobile, half on tablet, third on desktop --> </div>

3. Container Types#

<!-- Fixed-width container --> <div class="container"> <!-- Content --> </div> <!-- Fluid container (full-width) --> <div class="container-fluid"> <!-- Content --> </div> <!-- Responsive containers --> <div class="container-sm"> <div class="container-md"> <div class="container-lg"> <div class="container-xl">

Resources#

  • Official Documentation: getbootstrap.com/docs

  • GitHub Repository: github.com/twbs/bootstrap

  • Bootstrap Icons: icons.getbootstrap.com

  • Bootstrap Themes: themes.getbootstrap.com

Getting Help#

  • Stack Overflow: Tag ‘bootstrap’

  • Bootstrap’s GitHub Issues

  • Bootstrap’s Official Blog

  • Bootstrap Community Forums

Remember to keep your Bootstrap installation updated for the latest features and security patches.