Learning Center - bootstrap https://codingchoice.com/learn/ 2026-05-03T10:38:42+00:00 Learning Center https://codingchoice.com/learn/ https://codingchoice.com/learn/_media/logo.png text/html 2025-02-09T21:29:32+00:00 Anonymous (anonymous@undisclosed.example.com) add_images_and_icons https://codingchoice.com/learn/bootstrap/add_images_and_icons?rev=1739136572&do=diff Adding Images and Icons Inserting Images <img src="cover.jpg" class="img-fluid" alt="Book Cover"> Using Bootstrap Icons <i class="bi bi-book"></i> Read More text/html 2025-02-09T21:08:51+00:00 Anonymous (anonymous@undisclosed.example.com) basic_layout https://codingchoice.com/learn/bootstrap/basic_layout?rev=1739135331&do=diff Basic Layout A book structure typically includes a cover, table of contents, chapters, and an index. Here’s a Bootstrap layout example: <div class="container"> <header class="text-center py-5 bg-primary text-white"> <h1>My Book Title</h1> <p>By Author Name</p> </header> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Book Navigation</a> <button class="nav… text/html 2025-02-09T21:24:52+00:00 Anonymous (anonymous@undisclosed.example.com) components https://codingchoice.com/learn/bootstrap/components?rev=1739136292&do=diff Enhancing with Bootstrap Components Buttons <button class="btn btn-primary">Read More</button> Cards for Chapter Summaries <div class="card"> <div class="card-body"> <h5 class="card-title">Chapter 1</h5> <p class="card-text">An overview of the first chapter.</p> <a href="#chapter1" class="btn btn-primary">Go to Chapter</a> </div> </div> text/html 2025-02-11T03:01:32+00:00 Anonymous (anonymous@undisclosed.example.com) introduction https://codingchoice.com/learn/bootstrap/introduction?rev=1739242892&do=diff Introduction to Bootstrap Bootstrap is a powerful front-end framework that enables developers to create responsive and modern websites quickly. This guide provides a detailed explanation of how to structure a book using Bootstrap, including setup, layout, navigation, typography, and interactive elements. text/html 2025-02-09T21:37:02+00:00 Anonymous (anonymous@undisclosed.example.com) js_interactivity https://codingchoice.com/learn/bootstrap/js_interactivity?rev=1739137022&do=diff Adding Interactivity with JavaScript <button class="btn btn-success" onclick="showMessage()">Click Me</button> <p id="message" style="display: none;">Hello, Bootstrap!</p> <script> function showMessage() { document.getElementById('message').style.display = 'block'; } </script> text/html 2025-02-09T21:34:14+00:00 Anonymous (anonymous@undisclosed.example.com) responsive_sidebar https://codingchoice.com/learn/bootstrap/responsive_sidebar?rev=1739136854&do=diff Creating a Responsive Sidebar <div class="d-flex"> <nav class="nav flex-column bg-light p-3" style="width: 250px;"> <a class="nav-link" href="#introduction">Introduction</a> <a class="nav-link" href="#chapter1">Chapter 1</a> <a class="nav-link" href="#chapter2">Chapter 2</a> </nav> <div class="content flex-grow-1 p-3"> <h2>Welcome to the Book</h2> <p>Content goes here...</p> </div> </div> text/html 2025-02-09T21:07:55+00:00 Anonymous (anonymous@undisclosed.example.com) setup https://codingchoice.com/learn/bootstrap/setup?rev=1739135275&do=diff Setting Up Bootstrap To use Bootstrap in your project, include the following in the <head> section of your HTML file: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Book Example</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></scr… text/html 2025-02-09T21:36:00+00:00 Anonymous (anonymous@undisclosed.example.com) sidebar https://codingchoice.com/learn/bootstrap/sidebar?rev=1739136960&do=diff * Introduction * Setting Up Bootstrap * Basic Layout * Enhancing with Bootstrap Components * Buttons * Cards for Chapter Summaries * Alerts for Notes * Adding Images and Icons * Tables for Book Index * Creating a Responsive Sidebar * Interactivity with JavaScript text/html 2025-02-09T21:32:53+00:00 Anonymous (anonymous@undisclosed.example.com) table_example https://codingchoice.com/learn/bootstrap/table_example?rev=1739136773&do=diff Tables for Book Index <table class="table table-striped"> <thead> <tr> <th>Chapter</th> <th>Title</th> <th>Page</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Getting Started</td> <td>5</td> </tr> <tr> <td>2</td> <td>Advanced Concepts</td> <td>25</td> </tr> </tbody> </table>