Bootstrap Framework Basics

What is Bootstrap?

• A popular, open-source front-end framework for building responsive, mobile-first web applications
• Developed by Mark Otto and Jacob Thornton at Twitter
• Initially released in 2011

Key Features

• Responsive design: Bootstrap's grid system allows for easy creation of responsive layouts
• Pre-built components: Includes a wide range of UI components, such as navigation, alerts, and modals
• Customizable: Provides a wide range of customization options through Sass variables and a robust theme system
• Cross-browser compatibility: Tested and supported in multiple browsers, including Chrome, Firefox, Safari, and Internet Explorer

Grid System

• 12-column grid: Divide the screen into 12 equal columns for flexible layout creation
• Breakpoints: Define different layouts for different screen sizes (e.g., xs, sm, md, lg, xl)
• Container classes: Use .container or .container-fluid to create a responsive container

Components

• Navigation: .nav class for navigation bars, including tabs, pills, and lists
• Alerts: .alert class for displaying alert messages
• Modals: .modal class for creating modal windows
• Buttons: .btn class for creating buttons with various styles and sizes

Utilities

• Spacing: Use classes like .mx-* and .px-* to control margin and padding
• Color: Use classes like .text-* and .bg-* to control text and background colors
• Sizing: Use classes like .w-* and .h-* to control width and height

Customization

• Sass variables: Override Bootstrap's default variables to customize the framework
• Theme system: Use a custom theme or create your own using Bootstrap's theme system

Versions

• Bootstrap 3: The original version, released in 2013
• Bootstrap 4: Released in 2018, with major updates to the grid system and components
• Bootstrap 5: Released in 2020, with further improvements to the grid system and new features

What is Bootstrap?

• A popular, open-source front-end framework for building responsive, mobile-first web applications.
• Developed by Mark Otto and Jacob Thornton at Twitter.
• Initially released in 2011.

Key Features

• Enables responsive design with its grid system.
• Includes pre-built UI components like navigation, alerts, and modals.
• Offers customization options through Sass variables and a robust theme system.
• Ensures cross-browser compatibility with multiple browsers.

Grid System

• Based on a 12-column grid for flexible layout creation.
• Defines different layouts for different screen sizes using breakpoints (xs, sm, md, lg, xl).
• Uses container classes (.container or .container-fluid) for responsive containers.

Components

• Navigation: uses .nav class for navigation bars, including tabs, pills, and lists.
• Alerts: uses .alert class for displaying alert messages.
• Modals: uses .modal class for creating modal windows.
• Buttons: uses .btn class for creating buttons with various styles and sizes.

Utilities

• Controls spacing with classes like .mx-* and .px-* for margin and padding.
• Controls text and background colors with classes like .text-* and .bg-*.
• Controls width and height with classes like .w-* and .h-*.

Customization

• Allows customization using Sass variables.
• Offers a theme system for creating custom themes.

Versions

• Bootstrap 3: the original version, released in 2013.
• Bootstrap 4: released in 2018, with updates to the grid system and components.
• Bootstrap 5: released in 2020, with further improvements to the grid system and new features.