Web design and Development
▌1. Bootstrap Layout
Bootstrap's layout system is built around containers and a 12-column responsive grid. Containers
(.container or .container-fluid) provide a fixed-width or full-width wrapper for your content. The grid
system uses .row to create horizontal groups of columns, and .col-* classes to define the width and
responsiveness of individual columns. This allows for flexible and mobile-first page structures.
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Layout</title>
<link href="[Link] rel="stylesheet">
</head>
<body>
<div class="container my-4"> <!-- Fixed-width container with vertical margin -->
<h3>Responsive Grid Layout</h3>
<div class="row"> <!-- A row to contain columns -->
<div class="col-sm-6 col-md-4 mb-3"> <!-- Takes 6 units on small, 4 on medium screens and up
-->
<div class="p-3 bg-primary text-white">Column 1</div>
</div>
<div class="col-sm-6 col-md-4 mb-3"> <!-- Takes 6 units on small, 4 on medium screens and up
-->
<div class="p-3 bg-success text-white">Column 2</div>
</div>
<div class="col-sm-12 col-md-4 mb-3"> <!-- Takes 12 units on small, 4 on medium screens and
up -->
<div class="p-3 bg-info text-white">Column 3</div>
</div>
</div>
</div>
</body>
</html>
▌2. Bootstrap Content (Typography & Images)
Bootstrap styles common HTML elements like headings, paragraphs, and images to ensure consistency
and responsiveness. It provides utility classes for typography (e.g., .lead for prominent text, text-* for
alignment/casing) and makes images responsive with img-fluid, which prevents them from overflowing
their parent container.
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Content</title>
<link href="[Link] rel="stylesheet">
</head>
<body>
<div class="container my-4">
<h3>Typography Examples</h3>
<h1>This is an H1 Heading</h1>
<p class="lead">This is a lead paragraph, designed to stand out more than regular body text.</p>
<p class="text-muted">This text is muted, often used for secondary information.</p>
<p class="text-center text-uppercase">This text is centered and all uppercase.</p>
<h3 class="mt-5">Responsive Image</h3>
<div class="row">
<div class="col-md-6">
<img src="[Link]
class="img-fluid rounded" alt="Responsive placeholder image">
<small class="d-block mt-2">The image above scales beautifully with the browser
window.</small>
</div>
</div>
</div>
</body>
</html>
---
▌3. Bootstrap Forms
Bootstrap simplifies creating well-styled and responsive forms. It provides classes for form controls
(.form-control), labels (.form-label), checkboxes/radios (.form-check), and buttons (.btn, .btn-primary).
These classes ensure consistent styling, proper spacing, and responsiveness across devices, making forms
easy to read and interact with.
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Forms</title>
<link href="[Link] rel="stylesheet">
</head>
<body>
<div class="container my-4">
<h3>Simple Contact Form</h3>
<div class="row justify-content-center">
<div class="col-md-6">
<form>
<div class="mb-3"> <!-- Margin bottom for spacing -->
<label for="nameInput" class="form-label">Name</label>
<input type="text" class="form-control" id="nameInput" placeholder="Your Name">
</div>
<div class="mb-3">
<label for="emailInput" class="form-label">Email address</label>
<input type="email" class="form-control" id="emailInput"
placeholder="name@[Link]">
</div>
<div class="mb-3">
<label for="messageTextarea" class="form-label">Your Message</label>
<textarea class="form-control" id="messageTextarea" rows="3"></textarea>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="termsCheck">
<label class="form-check-label" for="termsCheck">Agree to terms and conditions</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<!-- Bootstrap JS is not strictly needed for basic forms, but good to include for full functionality -->
<script src="[Link]
</body>
</html>
Columns build on the grid’s flexbox architecture. Flexbox means we have options for
changing individual columns and modifying groups of columns at the row level. You
choose how columns grow, shrink, or otherwise change.
When building grid layouts, all content goes in columns. The hierarchy of Bootstrap’s
grid goes from container to row to column to your content.
Bootstrap includes predefined classes for creating fast, responsive layouts. With six
breakpoints and a dozen columns at each grid tier, you have dozens of classes already
built for you to create your desired layouts.
Alignment
Use flexbox alignment utilities to vertically and horizontally align columns. To vertically and
horizontally align columns using Flexbox alignment utilities, you can apply the following
classes depending on the framework you're using. Here's how to do it with Bootstrap 5, which
provides convenient flexbox utility classes.
Column wrapping
If more than 12 columns are placed within a single row, each group of extra columns will, as
one unit, wrap onto a new line.
Column breaks
Breaking columns to a new line in flexbox requires a small hack: add an element with width:
100% wherever you want to wrap your columns to a new line.
Reordering
Order classes
Use .order- classes for controlling the visual order of your content. These classes are
responsive, so you can set the order by breakpoint (e.g., .[Link]-md-2). Includes
support for 1 through 5 across all six grid tiers.
Offsetting columns
You can offset grid columns in two ways: responsive .offset- grid classes and margin
utilities. Grid classes are sized to match columns while margins are more useful for quick
layouts where the width of the offset is variable.
Offset classes
Move columns to the right using .offset-md-* classes. These classes increase the
left margin
of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.
Standalone column classes
The .col-* classes can also be used outside a .row to give an element a specific width.
Whenever column classes are used as non-direct children of a row, the paddings are omitted.
3.1.5. Gutters
Gutters
Gutters are the padding between your columns, used to responsively space and align content
in the Bootstrap grid system.
How Gutters work
● Gutters are the gaps between column content, created by horizontal padding. We set
padding-right and padding-left on each column, and use negative margin to offset that
at the start and end of each row to align content.
● Gutters start at 1.5rem (24px) wide. This allows us to match our grid to the padding
and margin spacers scale.
● Gutters can be responsively adjusted. Use breakpoint-specific gutter classes to modify
horizontal gutters, vertical gutters, and all gutters.
Horizontal gutters
.gx-* classes can be used to control the horizontal gutter widths. The .container or .container-
fluid parent may need to be adjusted if larger gutters are used to avoid unwanted overflow,
using a matching padding utility. For example, in the following example we have increased
the padding with .px-4:
Vertical gutters
.gy-* classes can be used to control the vertical gutter widths. Like the horizontal gutters, the
vertical gutters can cause some overflow below the .row at the end of a page. If this occurs,
you add a wrapper around .row with the .overflow-hidden class:
Horizontal & vertical gutters
.g-* classes can be used to control the horizontal gutter widths, for the following example we
use a smaller gutter width, so there will not be a need to add the .overflow-hidden wrapper class.
Bootstrap Images:
Bootstrap provides utility classes to manage how images display on a webpage. The img-fluid class is
crucial for making images responsive, ensuring they scale within their parent elements and don't
overflow. For visual styling, img-thumbnail creates a bordered, slightly padded look similar to a
traditional photo frame. You can also easily center images using Bootstrap's display and spacing utilities
or flexbox classes.
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Images</title>
<!-- Bootstrap CSS CDN -->
<link href="[Link] rel="stylesheet"
integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<style>
/* Custom styling for demonstration to give context to centering */
.image-container {
border: 1px dashed #ccc;
padding: 15px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container my-5">
<h2 class="mb-4">Bootstrap Image Examples</h2>
<!-- Responsive Image -->
<div class="image-container">
<h4>1. Responsive Image (`.img-fluid`)</h4>
<p>This image will scale down to fit its parent container and never overflow.</p>
<img src="[Link]
class="img-fluid rounded" alt="Responsive Image Example">
</div>
<!-- Thumbnail Image -->
<div class="image-container">
<h4>2. Thumbnail Image (`.img-thumbnail`)</h4>
<p>Applies a subtle border and padding, giving it a framed look.</p>
<img src="[Link] class="img-
thumbnail" alt="Thumbnail Image Example">
</div>
<!-- Centered Image -->
<div class="image-container">
<h4>3. Centered Image (`.mx-auto d-block` or Flexbox)</h4>
<p>Two ways to center an image. First, using margin auto and display block:</p>
<img src="[Link]
class="img-fluid mx-auto d-block mb-3" alt="Centered Image Example 1">
<p>Second, using Bootstrap's flexbox utilities on the parent container:</p>
<div class="d-flex justify-content-center">
<img src="[Link]
class="img-fluid" alt="Centered Image Example 2">
</div>
</div>
</div>
<!-- Bootstrap JS CDN (not strictly needed for images, but good practice for full pages) -->
<script src="[Link]
integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>
Output Description for the Code Example:
1. Responsive Image:
• A large blue placeholder image labeled "Responsive Image" will fill the width of its parent container
(which is itself within the main Bootstrap container).
• As you resize the browser window, the image will shrink proportionally, always staying within its
bounds and never becoming larger than its original intrinsic size or the width of the container. It will also
have slightly rounded corners due to the rounded class.
2. Thumbnail Image:
• A green placeholder image labeled "Thumbnail" will appear.
• It will have a subtle, light gray 1px border around it and a small amount of padding, making it look
like a framed photo. Its size will be fixed at 200x200 pixels as per the placeholder URL.
3. Centered Image:
• Method 1 (mx-auto d-block): A yellow placeholder image labeled "Centered Image 1" will be
horizontally centered within its parent container. It will be an img-fluid so it scales if the container is
smaller than 300px. The mx-auto (margin-left and margin-right auto) class works only on block-level
elements, which d-block ensures.
• Method 2 (Flexbox on Parent): A red placeholder image labeled "Centered Image 2" will also be
horizontally centered. This is achieved by making its parent div a flex container (d-flex) and then using
justify-content-center to center its contents. This image is also img-fluid.
Bootstrap Core Concepts & Utilities
• **Color:** Bootstrap's predefined palette (e.g., primary, success, danger, light, dark) used for text,
backgrounds, and borders via utility classes (e.g., text-primary, bg-dark, border-success).
• **CSS:** The fundamental styling language Bootstrap is built upon. All Bootstrap features are
implemented as CSS classes applied to HTML elements.
• **Variables:** Bootstrap leverages CSS Custom Properties (CSS variables) for easy, real-time
customization of colors, fonts, and other design tokens directly in the browser. Sass variables are used for
compile-time customization.
• **Optimize:** Refers to practices like minifying CSS/JS, tree-shaking (removing unused code), and
using CDNs to ensure Bootstrap assets load quickly and efficiently.
• **Breakpoint:** Specific screen width thresholds (e.g., sm at 576px, md at 768px, lg at 992px) where
Bootstrap's layout and components adjust for responsiveness.
• **Z-index:** A CSS property controlling the stacking order of elements. Bootstrap uses predefined z-
index values for components like modals, navbars, and tooltips to ensure they appear correctly on top of
other content.
• **Reboot:** A collection of element-specific CSS changes based on [Link], providing a
consistent and elegant baseline style for all HTML elements across different browsers.
---
### Bootstrap Layout System
• **Container:** Essential layout component for wrapping site content. .container gives a responsive
fixed-width, centered layout. .container-fluid provides a full-width layout.
• **Grid:** Bootstrap's powerful 12-column responsive layout system, built with Flexbox. It structures
content into rows and columns to adapt to various screen sizes.
• **Columns:** Horizontal content units within a .row. Defined using .col-* classes (e.g., col-6, col-
md-4) to specify width and responsiveness across breakpoints.
• **Gutters:** The padding between columns in Bootstrap's grid system, creating visual separation.
Controlled by .g-* utility classes (g-0 to g-5) for horizontal and vertical spacing.
• **Layout:** The overall structure and arrangement of content on a webpage, primarily governed by
Bootstrap's grid system, containers, and spacing utilities.
---
### Bootstrap Content & Styling
• **Typography:** Bootstrap styles HTML headings (<h1>-<h6>), paragraphs (<p>), lists, and offers
utility classes for text alignment (text-center), transformation (text-uppercase), and weight (fw-
bold). .lead makes a paragraph stand out.
• **Images:** Utility classes for responsive and styled images. img-fluid makes images scale within
their parent (max-width: 100%). img-thumbnail gives a framed appearance. rounded applies rounded
corners.
• **Tables:** Enhances basic HTML <table> elements with .table for a clean, default look. Offers
variations like table-striped, table-bordered, table-hover, table-dark, and table-responsive.
• **Figures:** A component for displaying media (images, videos) with an optional caption, using
<figure> and <figcaption> HTML elements with Bootstrap classes for styling.
---
### Bootstrap Forms
• **Form control:** The base class .form-control applies consistent styling to text-based <input>,
<textarea>, and <select> elements, making them responsive and visually appealing.
• **Select:** Styled <select> menus using the .form-select class, providing a consistent appearance
across different browsers.
• **Checks & radios:** Enhanced styling and flexible layout options for checkboxes and radio buttons
(.form-check-input) within a .form-check wrapper.
• **Range:** Styled slider
input element (<input type="range">) with the .form-range class for consistent appearance.
• **Input group:** A component to extend form controls by easily adding text (.input-group-text),
buttons, or button groups to either side of an input field.
• **Floating Labels:** An alternative form layout where the placeholder text becomes a label that
floats above the input field when focused or filled, using .form-floating.
• **Validation:** Provides visual feedback to users about form input validity using classes like .is-
valid, .is-invalid, and associated messages (.valid-feedback, .invalid-feedback).
---
### Bootstrap Components
• **Alerts:** Contextual feedback messages (e.g., success, danger, warning) that can be dismissed.
Uses .alert and .alert-{color} classes.
• **Badge:** Small, inline count and labeling components, often used for notifications or status
indicators, styled with .badge and contextual color classes.
• **Breadcrumb:** Indicates the current page's location within a hierarchical navigation structure,
aiding user orientation.
• **Buttons:** Standardized interactive elements with various styles (.btn, .btn-primary), sizes (.btn-
lg, .btn-sm), and states (active, disabled).
• **Button group:** A group of related buttons displayed horizontally, often sharing borders, useful for
grouping similar actions. Uses .btn-group.
• **Card:** A flexible and extensible content container with options for headers, footers, various
content types (images, text, lists), and contextual backgrounds.
• **Carousel:** A JavaScript-powered slideshow component for cycling through a series of elements
(images, text) with transitions and controls.
• **Close button:** A generic dismiss button (.btn-close) used in components like alerts, modals, and
toasts.
• **Collapse:** A JavaScript plugin that allows you to toggle the visibility of content, often used for
accordions or expanding/collapsing sections.
• **Dropdowns:** Toggleable, contextual overlays for displaying lists of links or actions. Uses
JavaScript for interactive behavior.
• **List group:** A flexible and powerful component for displaying a series of content, which can be
links, buttons, or custom HTML.
• **Modal:** A JavaScript-powered dialog box or popup window that displays content on top of the
current page, requiring user interaction.
• **Navs & tabs:** Components for building navigation lists. .nav with .nav-item and .nav-link for
basic navigation; also supports tabbed interfaces.
• **Navbar:** A responsive navigation header component that includes support for branding,
navigation links, forms, and other elements.
• **Offcanvas:** A sidebar component that can be toggled via JavaScript to slide in from the edge of
the viewport, often used for mobile navigation or additional content.
• **Pagination:** A component for indicating a series of related pages, typically for navigation through
search results or long lists.
• **Popovers:** Small overlay content boxes that appear when a user clicks or hovers over an element,
providing additional information. Requires JavaScript ([Link]).
• **Progress:** Displays the progress of a task or action, using .progress and .progress-bar for visual
feedback.
• **Scrollspy:** Automatically updates active navigation items based on the scroll position, indicating
which section of a page is currently in view. Requires JavaScript.
• **Spinners:** Visual indicators (loading animations) used to communicate that an action is
processing or content is loading.
• **Toasts:** Small, lightweight notifications designed to mimic system push notifications, often
appearing temporarily at screen corners. Requires JavaScript.
• **Tooltips:** Small, interactive text labels that appear when a user hovers over or focuses on an
element, providing brief co