GitHub - learnwithfair/bootstrap-documentation: bootstrap-documentation with [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]

BOOTSTRAP-5 DOCUMENTATION

Thanks for visiting my GitHub account!

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components more Or, Click

Or, Click

Source Code (Download)

Click Here

Required Software (Download)

VS Code, Download ->https://code.visualstudio.com/download

Prerequisites

HTML
CSS

How to use Bootstrap?

Initialize in the Header Section For Bootstrap

   <!-- Bootstrap Start  -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
     <!-- Bootstrap End  -->

Initialize in the Header Section For Icon

    <!-- For Icon  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" crossorigin="anonymous">
    </script>

Initialize in the Footer Section For Bootstrap

   <!-- Bootstrap Start  -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
    <!-- For Popper  -->
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
      crossorigin="anonymous"
    ></script>
    <!-- Bootstrap End  -->

BS4 vs BS5

support IE 10 and 11
more colors added in bootstrap 5
card-deck class is not supported anymore
jumbotron not supported in bs5
jQuery is removed and vanila js has taken place in bs5
bootstrap 5 has own SVG icons
form elements such as buttons, checkboxes used to look - different based on OS and browser now it remains same
breakpoints: now 6 break-points xs, sm, md, lg, xl, xxl

0. welcome to Bootstrap4 and 5

1. Introduction to Bootstrap

1.1 What is Bootstrap?

Most powerful and popular Front end framework.

1.2 Why Bootstrap?

It includes HTML, CSS based design for buttons, navigation etc.
Easier web development
- create navbar, alert boxes, different layout so easily
Create responsive web page easily
save time
open source

2. Create a bootstrap webpage

create a basic html file with 6 heading tags
How to add bootstrap to your project?
- add css cdn to the head of html file : <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
- add js cdn inside the body: <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

3. Containers and grid

breakpoints: xs < 576px | sm >=576px | md >=768px | lg >=992 | xl >=1200px | xxl >=1400px
.container: for x-small it will take 100%; but for other breakpoints it will take maximum not full width of viewport
.container-fluid
.container-{breakpoint}; example- .container-md

example

<div class="container">
  <h1>Rahatul Rabbi</h1>
  <p>Born To Teach.</p>

  <h2>About Me</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta,
    repudiandae laboriosam? Odit repudiandae beatae eius modi sapiente eveniet
    exercitationem illum.
  </p>
</div>

built with flexbox layout
.row
.col, .col-{breakpoints}; breakpoints are: xs, sm, md, lg, xl, xxl
responsive grid

example:

<div class="row">
  <h2>My Services</h2>
  <div class="col-md-4 col-md-6">
    <h3>Web development</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="col-md-4 col-md-6">
    <h3>Web development</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="col-md-4 col-md-6">
    <h3>Web development</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
</div>
```html

4. bootstrap 4 vs bootstrap5

5. colors and spacing - Margin, padding

colors: primary(blue), success(green), info(light blue), warning(orange), danger(red), secondary(grey), white, dark, light
bg-colorName
text-colorName
p-0 (no padding), p-1(0.25rem), p-2(0.5rem), p-3(1rem), p-4(1.5rem) to p-5
pl-value; pr-value, pt-value; pb-value; px-value; py-value;
responsive padding: p-3, p-lg-5
use m for margin

6. border and image

border, border-colorName, rounded-left, rounded-circle
responsive image: img-fluid
thumbnail image: img-thumbnail
aligning-image: float start, float-end
centering image: mx-auto d-block or make the parent div text-center

7. Text and font

text-left, text-right, text-center, text-justify
responsive text-alignment: text-sm-left text-md-center
text-lowercase, text-uppercase, text-capitalize
text-decoration-none

8. dismissible alert

example

<div class="alert alert-danger alert-dismissible" role="alert">
  <button
    class="btn-close"
    data-bs-dismiss="alert"
    aria-label="Close"
  ></button>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente, fuga!
</div>

9. blockquote and abbreviations

example

10. button, button group, list group

btn, btn-link, btn-group
btn-colorName; example: btn-primary, btn-light
btn-outline-colorName
button modifiers: btn-lg, btn-sm, btn-block, btn-group-lg, disabled
example

11. collapse and pagination

example

<!-- collapse example -->
<a href="#demo" data-bs-toggle="collapse">learn more</a>
<button
  class="btn btn-primary"
  type="button"
  data-bs-toggle="collapse"
  data-bs-target="#demo"
  aria-expanded="false"
  aria-controls="demo"
>
  learn more
</button>
<div class="collapse" id="demo">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Id dolorem sed
    quisquam repudiandae sequi voluptatibus, aperiam aliquam adipisci nam
    maiores quia unde necessitatibus veritatis eligendi in laboriosam, officia
    porro? Explicabo.
  </p>
</div>

<!-- pagination example -->
<footer>
  <ul class="pagination py-3 justify-content-center">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</footer>

12. Navigation menu

example

<!-- nav example -->
<ul class="nav justify-content-center py-3 bg-primary">
  <li class="nav-item">
    <a class="nav-link text-white text-uppercase active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-white text-uppercase" href="#">Tutorial</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-white text-uppercase" href="#">Gallery</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-white text-uppercase" href="#">Contact</a>
  </li>
</ul>

13. Toggleable dynamic tab and pill

14. Navbar

15. Card

example

<div class="row">
  <div class="col-lg-3">
    <div class="card">
      <img
        src="http:https://www.studywithanis.com/wp-content/uploads/2018/01/ICT-Cover.jpg"
        alt="hsc ict"
      />
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">card text is here. add your description</p>
        <a href="#" class="card-link stretched-link" target="_blank"
          >visit the link</a
        >
      </div>
    </div>
  </div>
</div>

16. Media objects

17. Table

we can use table-colorName on table, tr, td
Use .table-striped to add zebra-striping to any table row within the .
example

          <table class="table table-bordered table-hover text-center table-striped">
        <caption>
          My Education
        </caption>
        <thead style="background-color: darkseagreen">
          <tr>
            <th scope="col">Qualification</th>
            <th scope="col">Institution</th>
            <th scope="col">Passing Year</th>
            <th scope="col">Grade</th>
          </tr>
        </thead>
        <tbody>
          <tr class="table-primary">
            <th scope="row">SSC</th>
            <td>SingerKatch High School and College</td>
            <td>2006</td>
            <td rowspan="2">3.44 / 5.00</td>
          </tr>
          <tr class="table-secondary">
            <th scope="row">HSC</td>
            <td>SingerKatch High School and College</td>
            <td>2008</td>
          </tr>
          <tr>
            <th scope="row">BSc in CSE</td>
            <td>Leading University</td>
            <td>2017</td>
            <td>3.92 / 4.00</td>
          </tr>
        </tbody>
      </table>

18. Form

form controls create block level and allows us to style input and textarea with custom sizing, designing and more.
sizing: form-control, form-control-lg, form-control-sm
example

     <div id="contact-me" class="p-3">
      <h2 class="text-center">Contact</h2>
      <form action="">

        <!-- name here  -->
       <div class="mb-3">
          <label for="fullname" class="form-label">fullname: </label>
          <input type="text" id="fullname" name="fullname" class="form-control">
       </div>

       <!-- email here  -->
        <div class="mb-3">
          <label for="email" class="form-label">email: </label>
          <input type="email" id="email" name="email" class="form-control">
          <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
        </div>

        <!-- password here  -->
        <div class="mb-3">
          <label for="password" class="form-label">password: </label>
          <input type="password" id="password" name="password" class="form-control">
          <div id="passwordHelp" class="form-text">Must be 8-20 characters long.</div>
        </div>

       <!-- color selector here  -->
        <div class="mb-3">
            <label for="exampleColorInput" class="form-label">Color picker</label>
            <input type="color" class="form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
        </div>

        <!-- dropdown menu here  -->
        <div class="mb-3">
            <select class="form-select" aria-label="department">
               <option selected>CSE</option>
               <option value="1">EEE</option>
               <option value="2">LLB</option>
            </select>
        </div>

        <!-- checkbox here  -->
         <div class="mb-3">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="terms">
            <label class="form-check-label" for="terms">
              Accept terms and conditions
            </label>
          </div>
        </div>


        <!-- radio button  -->
         <div class="mb-3">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" id="male" name="gender">
            <label class="form-check-label" for="male">
              male
            </label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" id="male" name="gender">
            <label class="form-check-label" for="female">
              female
            </label>
          </div>
        </div>


        <!-- form-floating labels example; placeholder is required  -->

            <div class="form-floating mb-3">
              <input type="email" class="form-control" id="emailInput" placeholder="[email protected]">
              <label for="emailInput">Email address</label>
            </div>

            <div class="form-floating">
              <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
              <label for="floatingTextarea">Comments</label>
            </div>
        </div>


          <!-- form grid example  -->
          <div class="row">
            <div class="col">
              <input type="text" class="form-control" placeholder="First name" aria-label="First name">
            </div>
            <div class="col">
              <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
            </div>
          </div>

          <button class="btn btn-primary" type="submit">Submit</button>
        </div>
      </form>

19. Carousel

20. Badge, progress and tooltip

example

<h2>
  Bootstrap5 video <span class="badge bg-secondary rounded-pill">New</span>
</h2>

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

<button
  type="button"
  class="btn btn-secondary"
  data-bs-toggle="tooltip"
  data-bs-placement="right"
  title="by clicking sign up you will be registered"
>
  sign up
</button>

<div class="progress mt-3">
  <div
    class="progress-bar bg-success w-75"
    role="progressbar"
    aria-valuenow="75"
    aria-valuemin="0"
    aria-valuemax="100"
  >
    75%
  </div>
</div>

21. List group

example

<!-- list can have link and button  -->
<ul class="list-group">
  <li class="list-group-item active">An item</li>
  <a href="#" class="list-group-item list-group-item-action"
    >A second link item</a
  >
  <button type="button" class="list-group-item list-group-item-action">
    A third button item
  </button>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

<!-- list, badge  -->
<ul class="list-group">
  <li
    class="list-group-item d-flex justify-content-between align-items-center"
  >
    Books
    <span class="badge bg-primary rounded-pill">10</span>
  </li>
  <li
    class="list-group-item d-flex justify-content-between align-items-center"
  >
    Pens
    <span class="badge bg-primary rounded-pill">5</span>
  </li>
</ul>

22. float and svg icons

bootstrap svg icons - https://icons.getbootstrap.com/

example

<div class="clearfix">
  <div class="float-start w-50">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,
      architecto, totam harum eaque commodi dignissimos alias veniam tenetur
      maxime, sapiente nisi facere ipsa saepe inventore.
    </p>
  </div>
  <div class="float-end w-50">
    <p>
      <i class="bi bi-123"></i>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,
      architecto, totam harum eaque commodi dignissimos alias veniam tenetur
      maxime, sapiente nisi facere ipsa saepe inventore.
    </p>
  </div>
</div>

<button class="btn btn-primary">
  <svg
    xmlns="http:https://www.w3.org/2000/svg"
    width="16"
    height="16"
    fill="currentColor"
    class="bi bi-alarm"
    viewBox="0 0 16 16"
  >
    <path
      d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"
    />
    <path
      d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"
    />
  </svg>
  Alarm
</button>

23. position and display

example

<!-- // display: none, block, inline, inline-block, flex, grid, table -->

<!-- <button class="d-none">click me 1</button>
  <button class="d-block">click me 2</button>

  <div class="bg-success d-inline-block">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A culpa</p>
  </div>
  <div class="bg-primary d-inline-block">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus
      tempore in qui. Quasi, quas non?
    </p>
  </div> -->

<!-- positioning: static, fixed, sticky, absolute, relative -->

<div class="bg-success position-relative" style="height: 200px">
  <button class="position-absolute start-50 top-50 translate-middle">
    click me
  </button>
</div>

24. flex

example

<!-- responsive flex items -->
<div
  class="card-container d-flex flex-sm-column flex-md-row bg-success p-3"
  <!--
>
  <div class="card w-25">
    <div class="card-body">
      <h4 class="card-title">card title</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
  <div class="card w-25">
    <div class="card-body">
      <h4 class="card-title">card title</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
  <div class="card w-25">
    <div class="card-body">
      <h4 class="card-title">card title</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
</div>

<!-- horizontal alignment  -->
<!-- justify-content-value; here value can be start, end, center, between, around, evenly -->
<div
  class="card-container d-flex flex-sm-column flex-md-row bg-success p-3 justify-content-evenly"
>
  <div class="card w-25">
    <div class="card-body">
      <h4 class="card-title">card title</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
  <div class="card w-25">
    <div class="card-body">
      <h4 class="card-title">card title</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
  <div class="card w-25">
    <div class="card-body">
      <h4 class="card-title">card title</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
</div>

<!-- vertical alignment -->
<!-- align-items-value; here value can be start,end,center, stretch -->

<div
  class="card-container d-flex flex-sm-column flex-md-row bg-success p-3 align-items-center"
  style="height: 100vh"
  <!--
>
  <div class="card w-25">
    <div class="card-body">
      <h4 class="card-title">card title</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
  <div class="card w-25">
    <div class="card-body">
      <h4 class="card-title">card title</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
  <div class="card w-25">
    <div class="card-body">
      <h4 class="card-title">card title</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
</div>

<!-- horizontal and vertical alignment together -->

<div
  class="card-container d-flex flex-sm-column flex-md-row bg-primary p-3 justify-content-center align-items-center"
  style="height: 100vh"
  <!--
>
  <div class="card w-25 m-1">
    <div class="card-body">
      <h4 class="card-title">card title</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
  <div class="card w-25 m-1">
    <div class="card-body">
      <h4 class="card-title">card title</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
  <div class="card w-25 m-1">
    <div class="card-body">
      <h4 class="card-title">card title</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
</div>

<!-- order of flex items -->
<div
  class="card-container d-flex flex-sm-column flex-md-row bg-primary p-3 justify-content-center align-items-center"
  style="height: 100vh"
  <!--
>
  <div class="card w-25 m-1 order-3">
    <div class="card-body">
      <h4 class="card-title">card title1</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
  <div class="card w-25 m-1 order-1">
    <div class="card-body">
      <h4 class="card-title">card title2</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
  <div class="card w-25 m-1 order-2">
    <div class="card-body">
      <h4 class="card-title">card title3</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
</div>

<!-- align-self: start / end/ center / stretched -->
<div
  class="card-container d-flex flex-sm-column flex-md-row bg-primary p-3 justify-content-center align-items-center"
  style="height: 100vh"
  <!--
>
  <div class="card w-25 m-1 align-self-start">
    <div class="card-body">
      <h4 class="card-title">card title1</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
  <div class="card w-25 m-1">
    <div class="card-body">
      <h4 class="card-title">card title2</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
  <div class="card w-25 m-1 align-self-end">
    <div class="card-body">
      <h4 class="card-title">card title3</h4>
      <p class="card-text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </p>
    </div>
  </div>
</div>

25. Modal

example

<!-- modal example  -->
<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#exampleModal"
>
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">some text is here</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Follow Me

Facebook, Youtube, Instagram

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
images		images
README.md		README.md
index.html		index.html

learnwithfair/bootstrap-documentation

Folders and files

Latest commit

History

Repository files navigation

BOOTSTRAP-5 DOCUMENTATION

Source Code (Download)

Required Software (Download)

Prerequisites

How to use Bootstrap?

BS4 vs BS5

1.1 What is Bootstrap?

1.2 Why Bootstrap?

Follow Me

About

Topics

Resources

Stars

Watchers

Forks

Languages