Mastering Bootstrap helps the reader master Bootstrap CSS framework for faster and robust front-end development.
If you work in the web development world, you must have heard about Bootstrap, a comprehensive toolkit that includes HTML, CSS, and JavaScript tools for creating and developing web pages and apps.
Ever since it was released as an open-source project in 2011, Bootstrap has attracted increasing attention for legitimate reasons. Bootstrap is popular among web designers and developers since it is versatile and straightforward. Its significant characteristics are that it is adaptive by aesthetics, supports a colossal spectrum of browsers, and provides a reliable configuration by employing reusable components. It is simple to use and understand.
Bootstrap consists of a source code version and an executable version. Software engineers use Bootstrap for a variety of reasons. The Grid System in Bootstrap is popular mainly because it is simple to set up and master, with many components, styling for numerous HTML elements ranging from typography to buttons, and JavaScript plugin compatibility, all of which makes it even more versatile.
For a web designer, learning Bootstrap is almost imperative today since it allows your website to look good on every screen resolution and adaptable on every device without much effort. This will make your site appear more presentable, reduce development time, and be more convenient since it is simple to learn and execute. Many businesses continue to use it; hence it is a valuable talent.
As a career option, knowing Bootstrap might be a massive help if you want to work as a web developer. This is true whether you specialize in front-end or back-end web development. Bootstrap can help you save time and ensure that your websites are mobile-friendly and responsive.
With Mastering Bootstrap, learning Bootstrap becomes a charm, and will undoubtedly help readers advance their careers.
The Mastering Computer Science series is edited by Sufyan bin Uzayr, a writer and educator with more than a decade of experience in the computing field.
Author(s): Sufyan bin Uzayr
Series: Mastering Computer Science
Publisher: CRC Press
Year: 2022
Language: English
Pages: 609
City: Boca Raton
Cover
Half Title
Series Page
Title Page
Copyright Page
Table of Contents
Mastering Computer Science Series Preface
About the Editor
Chapter 1 Introduction to Bootstrap
Introduction
What Is Bootstrap?
Advantages and Disadvantages
Advantages
Disadvantages
Benefits over Other CSS Frameworks
Conclusion
Chapter 2 Getting Started
Download and Usage
Link to a CDN
Bootstrap V5.1 CDN
Use a Local Copy of Bootstrap
Install with Bower
Install with npm
Install with Composer
Supported Browser and Devices
Mobile Devices
Desktop Browsers
Modals and Dropdowns on Mobile
Overflow and Scrolling
iOS Text Fields and Scrolling
Navbar Dropdowns
Browser Zooming
Sticky :hover/:focus on iOS
Printing
Android Stock Browser
Select Menu
Validators
Use with JavaScript
Working with Bootstrap with the JavaScript Interface
Simple Page: Basic Structure
Components from Bootstrap That Don’t Require Any Custom JavaScript
Button Methods
Modal Methods
Events
Using Bootstrap Components to Indicate Progress
Extend the task1_save Function
Add a Progress Bar
Task Completion
Support for RTL
Required HTML
Starter Template
Approach
Customize from Source
Custom RTL Values
Alternate Font Stack
LTR and RTL at the Same Time
Edge Class and Known Limitations
The Breadcrumb Case
Conclusion
Chapter 3 Customization
Colors
All Colors
Text Colors
Background Colors
Links
Components
Components
Accordion
How It Works
Example
Flush
Accordion Item #1
Accordion Item #2
Accordion Item #3
Always Open
Accordion Item #1
Accordion Item #2
Accordion Item #3
Alerts
Examples
Giving Assistive Technology a Sense of Purpose
Link Color
Additional Content
Icons
Dismissing
Sass
Variables
Variant mixin
Loop
JavaScript Behavior
Triggers
Methods
Events
Badges
Examples
Headings
Headings
Buttons
Positioned
Background Colors
Conveying Meaning to Assistive Technologies
Pill Badges
Sass
Variables
Breadcrumb
Dividers
Accessibility
Sass
Variables
Buttons
Examples
Giving Assistive Technology a Sense of Purpose
Disable Text Wrapping
Button Tags
Outline Button
Sizes
Disabled State
Link Functionality Caveat
Block Buttons
Button Plugin
Toggle States
Methods
Sass
Variables
Mixins
Loops
Buttons Group
Example
Button groups
Ensure Correct Role and Provide a Label
Button active groups
Mixed Style
Outlined Styles
Checkbox and Radio Button Groups
Button Toolbar
Sizing
Nesting
Vertical Variation
Cards
About
Example
Content Types
Body
Tiles, Text, and Links
Images
List Groups
Kitchen Sink
Header and Footer
Sizing
Using Grid Markup
Using Utilities
Using Custom CSS:
Text Alignment
Navigation
Images
Images Caps
Images Overlays
Horizontal
Card Styles
Background and Color
Border
Mixins Utilities
Card Layout
Card Groups
Grid Cards
Masonry
Carousel
How It Works
Example
Slides Only
With Controls
With Indicators
With Captions
Crossfade
Individual .carousal-item Interval
Disable Touch Swiping
Dark Variant
Custom Transition
Usage
Via Data Attributes
Via JavaScript
Methods
Asynchronous Methods and Transitions
Events
Close Button
Example
Disable State
White Variant
Collapse
How It Works
Example
Multiple Targets
Accessibility
Sass
Variables
Classes
Usage
Via Data Attributes
Via JavaScript
Options
Methods
Asynchronous Transitions and Methods
Events
Dropdowns
Overview
Accessibility
Examples
Single-button
Sizing
Dark Dropdowns
Directions
RTL
Drop Up
Drop Right
Drop Left
Menu Items
Active
Disable
Menu Alignment
Responsive Alignment
Alignment Options
Menu Content
Headers
Dividers
Text
Forms
Dropdown Options
Autoclose Behavior
List Group
Basic Example
Active Items
Disable Items
Links and Buttons
Flush
Numbered
Horizontal
Contextual Classes
With Badges
Custom Content
Checkbox and Radios
JavaScript Behavior
Using Data Attributes
Modal
How It Works
Examples
Live Demo
Static Backdrop
Scrolling Long Content
Vertically Centered
Tooltips and Popovers
Using the Grid
Varying Modal Content
Toggle between Models
Change Animation
Remove Animation
Dynamic Heights
Accessibility
Embedding YouTube Videos
nav and Tabs
Base nav
Available Styles
Horizontal Alignment
Centered with .justify-content-center
Right-aligned with .justify-content-end
Vertical
Tabs
Pills
Fill and Justify
Working with Flex Utilities
Regarding Accessibility
Using Dropdowns
Tabs with Dropdowns
Pills with Dropdowns
navbar
How It Works
Supported Content
Brand
Text
Image
Image and Text
nav
Forms
Text
Color Schemes
Containers
Placement
Scrolling
Responsive Behaviors
Google
External Content
Off-canvas
How It Works
Examples
Off-canvas Components
Live Demo
Placement
Backdrop
Pagination
Overview
Working with the Icons
Disabled and Active States
Sizing
Alignment
Placeholders
About
Example
How It Works
Width
Color
Sizing
Animation
Popovers
Overview
Example: Enable Popovers Everywhere
Example: Using Container Option
Four Directions
Dismiss on Next Click
Disable Elements
Progress
How It Works
Labels
Height
Backgrounds
Multiple Bars
Stripped
Animated Strips
Scrollspy
How It Works
Example in navbar
Example with Nested nav
Example with list-group
Spinners
About
Border Spinner
Colors
Growing Spinner
Alignment
Margin
Placement
Flex
Floats
Text Aligns
Size
Buttons
Toasts
Overview
Examples
Basic
Live
Translucent
Stacking
Custom Content
Color Schemes
Placement
Accessibility
Tooltips
Overview
Example: Enable Tooltips Everywhere
Example
CSS Variables
Basic Usage
Inheritance of the Custom Properties
Validity and Values
The Traditional Way
Syntax of the var() Function
How var() Works
Example
Advantages of Using var()
Example
Browser Support
CSS var() Function
Optimization
Only Download Bootstrap Package You Need
Select the Source Instead of the Precompiled Download Package
Make Use of a Proven Client-side Optimization Technique
Write Lean CSS and JavaScript
Minify and Concatenate CSS and JavaScript Code
Watch Out for Your Image File Size
SASS and Mixins
File Structure
Importing
Variable Defaults
Maps and Loops
Modify Map
Add to a Map
Remove from the Map
Required Keys
Functions
Colors
Colors Contrast
Escape SVG
Add and Subtract Functions
Mixins
Color Schemes
Conclusion
Chapter 4 Layouts
Breakpoints
Core Concepts
Available Breakpoints
Media Queries
Max-width
Single Breakpoint
Between Breakpoint
Containers
How They Work
Default Container
Responsive Container
Fluid Container
Grid
Example
How It Works
Grid Options
Auto-layout Columns
Equal Width
Settings One Column Width
Variable Width Content
Responsive Classes
All of the Breakpoints
Stacked to Horizontal
Mix and Match
Row Columns
Nesting
Columns and Rows
How They Work
Alignment
Vertical Alignment
Horizontal Alignment
Column Wrapping
Column Breaks
Reordering
Order Classes
Offsetting Columns
Offsetting Classes
Margin Utilities
Stand-alone Column Classes
Utilities
Flexbox Options
Merging and Padding
Toggle Visibility
Conclusion
Chapter 5 Working with Content
Typography
Global Settings
Headings
Customizing Headings
Display Headings
Lead
Inline Text Element
Abbreviations
Blockquotes
Naming a Source
Alignment
List
Unstilled
Inline
Description List Alignment
Images
Responsive Images
Images Thumbnails
Aligning Images
Picture
Tables and Figures
Tables
Overview
Bootstrap
Variants
Accented tables
Striped rows
Hoverable Rows
Active Tables
Tables Borders
Bordered Table
Table without Borders
Small Tables
Vertical Alignment
Nesting
How Nesting Works
Anatomy
Table Head
Table Foot
Captions
Responsive Tables
Vertical Clipping/truncation
Always Responsive
Breakpoint Specific
Figures
Forms
Overview
Form Text
Disabled Form
Accessibility
Form Controls
Sizing
Disabled
Read-only
Read-only Plain Text
File Input
Color
Data Lists
Select
Default
Sizing
Disabled
Check and Radio
Approach
Checks
Indeterminate
Disabled
Radios
Disabled
Switches
Default (Stacked)
Inline
Without Labels
Toggle Buttons
Checkbox and Toggle Buttons
Radio Toggle Buttons
Outlined Styles
Range
Overview
Disable
Min and Max
Steps
Input Group
Basic Example
Wrapping
Sizing
Checkbox and Radios
Multiple Inputs
Multiple Add-ons
Button Add-ons
Button with Dropdowns
Segmented Buttons
Custom Forms
Custom Selects
Custom File Input
Floating Labels
Example
Text Areas
Selects
Layouts
Conclusion
Chapter 6 Components
Components
Accordion
How It Works
Example
Accordion Item #1
Accordion Item #2
Accordion Item #3
Flush
Accordion Item #1
Accordion Item #2
Accordion Item #3
Always Open
Accordion Item #1
Accordion Item #2
Accordion Item #3
Alerts
Examples
Conveying Meaning to Assistive Technologies
Link Color
Additional Content
Icons
Dismissing
Sass
Variables
Variant Mixin
Loop
JavaScript Behavior
Triggers
Methods
Events
Badges
Examples
Headings
Buttons
Positioned
Background Colors
Conveying Meaning to Assistive Technologies
Pill Badges
Sass
Variables
Breadcrumb
Example
List with Linked Items
Dividers
Accessibility
Sass
Variables
Buttons
Examples
Conveying Meaning to the Assistive Technologies
Disable Text Wrapping
Button Tags
Outline Button
Sizes
Disabled State
Link Functionality Caveat
Block Buttons
Button Plugin
Toggle States
Methods
Sass
Variables
Mixins
Loops
Buttons Group
Example
Ensure Correct Role and Provide a Label
Mixed Style
Outlined Styles
Checkbox and Radio Button Groups
Button Toolbar
Sizing
Nesting
Vertical Variation
Cards
About
Example
Content Types
Body
Tiles, Text, and Links
Images
List Groups
Kitchen Sink
Header and Footer
Sizing
Using Grid Markup
Using Utilities
Using Custom CSS
Text Alignment
Navigation
Images
Images Caps
Image Overlays
Horizontal
Card Styles
Background and Color
Border
Mixins Utilities
Card Layout
Card Groups
Grid Cards
Masnory
Carousel
How It Works
Example
Slides Only
With Controls
With Indicators
With Captions
Crossfade
Individual .carousal-item Interval
Disable Touch Swiping
Dark Variant
Custom Transition
Usage
Via Data Attributes
Via JavaScript
Options
Methods
Asynchronous Transitions and Methods
Events
Close Button
Example
Disable State
White Variant
Collapse
How It Works
Example
Multiple Targets
Accessibility
Sass
Variables
Classes
Usage
Via Data Attributes
Via JavaScript
Options
Methods
Asynchronous Methods and Transitions
Events
Dropdowns
Overview
Accessibility
Examples
Single Button
Split Button
Sizing
Dark Dropdowns
Directions
RTL
Drop Up
Drop Right
Drop Left
Menu Items
Active
Disable
Menu Alignment
Responsive Alignment
Alignment Options
Menu Content
Headers
Dividers
Text
Forms
Dropdown Options
Autoclose Behavior
List Group
Example
Active Items
Disable Items
Links and Buttons
Flush
Numbered
Horizontal
Contextual Classes
With Badges
Custom Content
Checkbox and Radios
JavaScript Behavior
Using Data Attributes
Modal
How It Works
Examples
Live Demo
Static Backdrop
Scrolling Long Content
Vertically Centered
Tooltips and Popovers
Using the Grid
Varying Modal Content
Toggle between Modals
Change Animation
Remove Animation
Dynamic Heights
Accessibility
Embedding YouTube Videos
NAV and Tabs
Base .nav
Available Styles
Alignment Horizontally
Right-aligned with .justify-content-end
Vertical
Tabs
Pills
Fill and Justify
Working with the Flex Utilities
Regarding Accessibility
Using Dropdowns
Tabs with Dropdowns
Pills with Dropdowns
Navbar
How It Works
Supported Content
Brand
Text
Image
Image and Text
nav
Forms
Text
Color Schemes
Containers
Placement
Scrolling
Responsive Behaviors
Google
External Content
Off-canvas
How Does It Work?
Examples
Off-canvas Components
Live Demo
Placement
Backdrop
Pagination
Overview
Working with Icons
Disable and Active States
Sizing
Alignment
Placeholders
About
Example
How It Works
Width
Color
Sizing
Animation
Popovers
Overview
Example: Allow Popovers Anywhere
Example: Using Container Option
Example
Four Directions
Dismiss on Next Click
Disable Elements
Progress
How It Works
Labels
Height
Backgrounds
Multiple Bars
Stripped
Animated Strips
Scrollspy
How It Works
Example in navbar
Example with Nested nav
Example with List-group
Spinners
About
Border Spinner
Colors
Growing Spinner
Alignment
Margin
Placement
Flex
Float
Text Aligns
Size
Buttons
Toasts
Overview
Examples
Basic
Live
Translucent
Stacking
Custom Content
Color Schemes
Placement
Accessibility
Tooltips
Overview
Example: Enable Tooltips Everywhere
Example
Conclusion
Chapter 7 Helpers
Clearfix
Colored Links
Ratios
About
Example
Aspect Ratio
Custom Ratio
Position
Fixed Top
Fixed Bottom
Sticky Top
Responsive Sticky Top
Visually Hidden
Stretched Link
Identifying the Containing Block
Text Truncation
Conclusion
Chapter 8 Utilities
Background
Background Color
Background Gradient
Borders
Additive
Subtractive
Border Color
Border-Width
Border-Radios
Sizes
Colors
Display
How It Works
Notation
Examples
Hiding Elements
Display in Print
Flex
Enable Flex Behaviors
Direction
Justify-content
Align-items
Align-self
Fill
Grow and Shrink
Auto-margins
With Align-items
Wrap
Order
Align Content
Media Object
Float
Overview
Responsive
Interactions
Text Selection
Pointer Events
Overflow
Position
Position Values
Arrange Elements
Center Elements
Examples
Shadows
Examples
Sizing
Relative to the Parent
Relative to the Viewport
Spacing
Margin and Padding
Notation
Here sides are one of the following:
Examples
Horizontal Centering
Negative Margin
Gap
Text
Text Alignment
Text Wrapping and Overflow
Word Break
Text Transform
Font Weight and Italics
Line Height
Monospace
Reset Color
Text Decoration
Vertical Alignment
With inline elements
With Table Cells
Visibility
Example
Conclusion
Chapter 9 Extending Bootstrap
Working with API
API
API Explained
Custom Class Prefix
Output
States
Output
Responsive Utilities
Output
Changing Utilities
Print Utilities
Output
Importance
Using the API
Add Utilities
Modify Utilities
Enable Responsively
Rename Utilities
Remove Utilities
Remove Utility in RTL
Output
Using Bootstrap in Django
Code
Using Bootstrap in WordPress
Using Bootstrap in Templates
Integrate Django Bootstrap Template
Django Bootstrap-4 Templates Are Extended
Conclusion
Bibliography
Index
