#02gridkarty_formularze

Opis Grid w Bootstrapie służy do układania elementów w kolumnach. Najczęściej używa się row i col.

#Grid, czyli kolumny

HTMLcopy<div class="container mt-4">
  <div class="row">
    <div class="col-md-4">
      <div class="p-3 border">Kolumna 1</div>
    </div>

    <div class="col-md-4">
      <div class="p-3 border">Kolumna 2</div>
    </div>

    <div class="col-md-4">
      <div class="p-3 border">Kolumna 3</div>
    </div>
  </div>
</div>

#Karta produktu

HTMLcopy<div class="container mt-4">
  <div class="card" style="width: 18rem;">
    <img src="https://picsum.photos/300/200" class="card-img-top" alt="Zdjęcie">

    <div class="card-body">
      <h5 class="card-title">Produkt</h5>
      <p class="card-text">Opis produktu na stronie.</p>
      <a href="#" class="btn btn-primary">Zobacz</a>
    </div>
  </div>
</div>

#Formularz Bootstrap

HTMLcopy<div class="container mt-4">
  <h1>Kontakt</h1>

  <form>
    <div class="mb-3">
      <label class="form-label">Imię</label>
      <input type="text" class="form-control" placeholder="Podaj imię">
    </div>

    <div class="mb-3">
      <label class="form-label">Email</label>
      <input type="email" class="form-control" placeholder="Podaj email">
    </div>

    <div class="mb-3">
      <label class="form-label">Wiadomość</label>
      <textarea class="form-control"></textarea>
    </div>

    <button class="btn btn-success">Wyślij</button>
  </form>
</div>

#Alerty

HTMLcopy<div class="alert alert-success">Zapisano poprawnie</div>
<div class="alert alert-danger">Wystąpił błąd</div>
<div class="alert alert-warning">Uwaga</div>