Day 28 Progress - Another day Learning Bootstrap Components

Today’s focus was on diving deeper into Bootstrap, enhancing my understanding of its versatile components. I explored the following aspects:

Card Component Bootstrap's card component offers fantastic versatility for content display. I played around with different classes to style and structure the card: card: The essential class that converts a <div> into a card. card-img-bottom: The correct class for adding an image at the bottom of the card. card-body: The area where the card's content lives, including the title, text, and button.

card: The primary class that turns a <div> into a card.
card-img-bottom: Correct class for placing an image at the bottom of the card.
card-body: Container for the card's content, including the title, text, and button.

<div class="card" style="width: 18rem;">
  <img src="Naruto.png" class="card-img-bottom" alt="error">
  <div class="card-body">
    <h5 class="card-title">Naruto Uzumaki</h5>
    <p class="card-text">The 7th Hokage</p>
    <a href="#" class="btn btn-primary">Go to Leaf Village</a>
  </div>
</div>

Grid System: The Bootstrap grid system is key to developing responsive layouts. Here’s a practical example of how to arrange and align content in rows and columns: container and row: The structure for responsive layouts.

container and row: Structure for responsive layouts.
col: Defines columns within a row.
bg-* classes: Add background colors for visual distinction.

<div class="container">
  <div class="row">
    <div class="col-4 bg-success">one</div>
    <div class="col-2 bg-dark">two</div>
    <br>
    <div class="row">
      <div class="col-md-5 bg-success">one</div>
      <div class="col-md-6 bg-light">two</div>
      <div class="col-md-1 bg-danger">three</div>
    </div>
    <br><br>
    <hr>
    <div class="row">
      <div class="col-md-6 col-xl-3 bg-success">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam nesciunt tempora numquam obcaecati natus molestiae perspiciatis optio, totam est, fugiat modi nulla itaque nihil nobis amet dolor blanditiis corporis sed!
      </div>
      <div class="col bg-secondary">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos suscipit consectetur rem explicabo, quasi nihil rerum error, totam porro ipsa reprehenderit, dicta sed earum. Eos quod quasi similique repellendus suscipit?
      </div>
      <div class="col bg-primary">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam autem excepturi quos nemo, adipisci est, sapiente temporibus, quia tempore architecto nulla ea nobis animi rerum totam ipsa aspernatur eligendi vero!
      </div>
    </div>
  </div>
</div>

Grid Vertical Alignment

Aligning content vertically within columns can be achieved using classes like align-items-end and align-self-start

align-items-end: Aligns all columns to the bottom.
align-self-start: Overrides the row alignment for that specific column, aligning it to the top.

  <div class="row align-items-end">
    <div class="col bg-success">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam nesciunt tempora numquam obcaecati natus molestiae perspiciatis optio, totam est, fugiat modi nulla itaque nihil nobis amet dolor blanditiis corporis sed!
    </div>
    <div class="col bg-primary">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo sed, voluptates expedita quo numquam quod quaerat dignissimos asperiores placeat ullam repellendus perspiciatis dicta quis vel, unde fugit maxime doloremque. Nostrum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos suscipit consectetur rem explicabo, quasi nihil rerum error, totam porro ipsa reprehenderit, dicta sed earum. Eos quod quasi similique repellendus suscipit?
    </div>
    <div class="col bg-danger">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam autem excepturi quos nemo, adipisci est, sapiente temporibus, quia tempore architecto nulla ea nobis animi rerum totam ipsa aspernatur eligendi vero!
    </div>
    <div class="col bg-success align-self-start">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus laudantium cum, incidunt at tempore in aspernatur, praesentium sequi sit doloremque suscipit recusandae eaque rerum nulla ullam, vel veritatis tempora soluta?
    </div>
  </div>

Form Component

Bootstrap simplifies form styling with a set of standard classes:

form-control: Applies consistent styling to input fields.
form-label: Styles labels associated with form controls.

  <h2>Form Demo</h2>
  <form class="mb-3">
    <label class="form-label" for="email">E-mail</label>
    <input type="text" placeholder="E-mail" class="form-control" id="email">

    <label class="form-label" for="password">Password</label>
    <input type="password" placeholder="Password" class="form-control" id="password">

    <label class="form-label" for="address">Address</label>
    <input type="text" placeholder="Address" class="form-control" id="address">
  </form>

Day 28 Progress - Another day Learning Bootstrap Components

Grid Vertical Alignment

Form Component