Module VI: Mastering Bootstrap
What is Bootstrap
Bootstrap is a popular open source CSS framework for building responsive, mobile-first websites
quickly.
- Advantages: Prebuilt components, consistent design language, cross-browser compatibility,
extensive documenation.
- Installation:
* CDN: <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" />
* Local: Download files and link /css/bootstrap.min.css and /js/bootstrap.bundle.min.js.
Setting Up Your Development Environment
- Editors: VS Code, Sublime Text, Atom.
- Browsers: Chrome, Firefox with DevTools.
- Link Bootstrap:
* CSS CDN in <head>.
* JS at end of <body> or via ES module import.
Bootstrap Grid System
Bootstrap uses a 12-column grid with rows (.row) and columns (.col-*).
<div class="container">
<div class="row">
<div class="col-md-8">Content</div>
<div class="col-md-4">Sidebar</div>
</div>
</div>
- Breakpoints: xs (default), sm >=576px, md >=768px, lg >=992px, xl >=1200px, xxl >=1400px.
- Nesting columns: place a .row inside a column.
Typography
- Headings: <h1 class="h3">Title</h1>.
- Alignment utilities: .text-center, .text-start, .text-end.
- Font weight: .fw-bold, .fw-light.
- Transform: .text-uppercase, .text-lowercase.
Buttons
Module VI: Mastering Bootstrap
- Basic: <button class="btn btn-primary">Save</button>.
- Variants: .btn-success, .btn-danger, .btn-outline-secondary.
- Sizes: .btn-lg, .btn-sm, .btn-block (w-100).
- Groups: <div class="btn-group"> ... </div>.
Images
- Responsive: <img src="pic.jpg" class="img-fluid" />.
- Shapes: .rounded, .rounded-circle, .img-thumbnail.
- Alignment: .float-start, .mx-auto d-block.
Icons with Bootstrap
- Add <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" />.
- Use <i class="bi bi-alarm"></i>.
- Size: .fs-3 for font-size.
- Align with text using .me-2 or .ms-2.
Containers
- .container provides fixed width at each breakpoint.
- .container-fluid is always 100 percent width.
- .container-xxl for custom breakpoints.
Bootstrap Grid System in Detail
- Multi-column: .col-lg-4 for three columns on large screens.
- Offsetting: .offset-md-2.
- Order: .order-md-2 to change column order.
- Nest rows inside columns for complex layouts.
Spacing Utilities
- Margin: .m-3 (all), .mt-5 (top), .mx-2 (x axis).
- Padding: .p-2, .py-4.
- Responsive: .mb-md-0 removes bottom margin on md up.
Navigation Bar (Navbar)
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav">
Module VI: Mastering Bootstrap
<span class="navbar-toggler-icon"></span>
</button>
<div id="nav" class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
</ul>
</div>
</div>
</nav>
Cards
<div class="card" style="width:18rem;">
<img src="img.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Text.</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
Alerts
<div class="alert alert-success alert-dismissible fade show" role="alert">
Data saved!
<button class="btn-close" data-bs-dismiss="alert"></button>
</div>
Modals
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Open</button>
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal</h5>
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">Body...</div>
</div>
</div>
</div>
Module VI: Mastering Bootstrap
Forms
<form>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" required />
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check" />
<label class="form-check-label" for="check">Accept</label>
</div>
<button class="btn btn-primary">Submit</button>
</form>
Display and Positioning
- Display: .d-block, .d-inline, .d-none.
- Visibility: .visible, .invisible.
- Positioning: .position-relative, .position-absolute, .top-0, .start-50, translate-middle.
Flexbox Utilities
- .d-flex activates flex.
- .justify-content-center, .align-items-start.
- .flex-column, .flex-row.
- Order: .order-1.
- Wrap: .flex-wrap.
Colors and Backgrounds
- Text colors: .text-primary, .text-danger.
- Backgrounds: .bg-success, .bg-gradient.
- Use opacity: .bg-primary.bg-opacity-25.
Sizing and Overflow Utilities
- Width/height: .w-50, .h-100.
- Overflow: .overflow-auto, .overflow-hidden.
Borders and Shadows
- Borders: .border, .border-top, .rounded.
- Color: .border-light.
- Shadows: .shadow, .shadow-lg.
Module VI: Mastering Bootstrap
Mobile-First Design Philosophy
Bootstrap styles start at the smallest breakpoint and scale up, making it mobile-first.
- Use responsive classes to override at larger sizes.
Creating Responsive Layouts
- Build with grid and flex utilities.
- Make images .img-fluid.
- Use .table-responsive for tables.
- Collapsible navbars with .navbar-toggler.
Carousel
<div id="carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button data-bs-target="#carousel" data-bs-slide-to="0" class="active"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" data-bs-target="#carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" data-bs-target="#carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
Introduction to React.js
React is a JavaScript library for building user interfaces.
- Components: Reusable UI pieces.
- JSX: HTML-like syntax in JavaScript.
- State and Props manage data.
- Virtual DOM improves performance.
- Lifecycle: mounting, updating, unmounting.
