Bootstrap 5.3.1 test

Select


<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Shadow

No shadow
Small shadow
Regular shadow
Larger shadow

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>

Button


<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Outline Button


<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Card

237 design
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere 

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Progress


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

Selengkapnya

Bootstrap Image Gallery

237 design
237 design
237 design 

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjIF4Q6h_rD-xkAg6_CT1nAoBpg7iS2OtmwiRDGHNle3bq7QgCzQr16er-lzRe7nlBhs214Ww77ft6B8KWJOPVDa8G6LdQr5FWbrjOIyNSmXU-fwDwiSEWpmNgF6f8I2m04YkZdUDoMFGK/s0-rw/og_237-design--logo.jpg" class="img-fluid" alt="237 design">
    </div>
    <div class="col-md-4">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjIF4Q6h_rD-xkAg6_CT1nAoBpg7iS2OtmwiRDGHNle3bq7QgCzQr16er-lzRe7nlBhs214Ww77ft6B8KWJOPVDa8G6LdQr5FWbrjOIyNSmXU-fwDwiSEWpmNgF6f8I2m04YkZdUDoMFGK/s0-rw/og_237-design--logo.jpg" class="img-fluid" alt="237 design">
    </div>
        <div class="col-md-4">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjIF4Q6h_rD-xkAg6_CT1nAoBpg7iS2OtmwiRDGHNle3bq7QgCzQr16er-lzRe7nlBhs214Ww77ft6B8KWJOPVDa8G6LdQr5FWbrjOIyNSmXU-fwDwiSEWpmNgF6f8I2m04YkZdUDoMFGK/s0-rw/og_237-design--logo.jpg" class="img-fluid" alt="237 design">
    </div>
  </div>
</div>



  <div class="row text-center text-lg-start">
    <div class="col-lg-4 col-md-4 col-6">
      <a href="#" class="d-block mb-4 h-100">
        <img class="img-fluid img-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIinNA_SaGrZCECZxv7GO6puUZHKB6f5T_pe3BP91UOadd14KCe_k-FFhkm43Ly-62FU9LRzi26nOF3PlT3XyXoUV-Rph3kOeE98VPtVXPbOU6KUQOvfKbcwCDqJp_z_jPR1zNUiPlQCAn/s300/237-design-logo_featured.png" alt="">
      </a>
    </div>
    <div class="col-lg-4 col-md-4 col-6">
      <a href="#" class="d-block mb-4 h-100">
        <img class="img-fluid img-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIinNA_SaGrZCECZxv7GO6puUZHKB6f5T_pe3BP91UOadd14KCe_k-FFhkm43Ly-62FU9LRzi26nOF3PlT3XyXoUV-Rph3kOeE98VPtVXPbOU6KUQOvfKbcwCDqJp_z_jPR1zNUiPlQCAn/s300/237-design-logo_featured.png" alt="">
      </a>
    </div>
    <div class="col-lg-4 col-md-4 col-6">
      <a href="#" class="d-block mb-4 h-100">
        <img class="img-fluid img-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIinNA_SaGrZCECZxv7GO6puUZHKB6f5T_pe3BP91UOadd14KCe_k-FFhkm43Ly-62FU9LRzi26nOF3PlT3XyXoUV-Rph3kOeE98VPtVXPbOU6KUQOvfKbcwCDqJp_z_jPR1zNUiPlQCAn/s300/237-design-logo_featured.png" alt="">
      </a>
    </div>
</div>

Bootstrap photo gallery

Red paint cup

Lorem ipsum dolor sit amet, consectetur adipisicing elit

JPG

New
Blorange

Lorem ipsum dolor sit amet, consectetur adipisicing elit

PNG

Trend
And She Realized

Lorem ipsum dolor sit amet, consectetur adipisicing elit

JPG

Featured
DOSE Juice

Lorem ipsum dolor sit amet, consectetur adipisicing elit

JPEG

Hot
Pineapple

Lorem ipsum dolor sit amet, consectetur adipisicing elit

PNG

New
Yellow banana

Lorem ipsum dolor sit amet, consectetur adipisicing elit

JPG

Featured
Teal Gameboy

Lorem ipsum dolor sit amet, consectetur adipisicing elit

JPEG

Hot
Color in Guatemala.

Lorem ipsum dolor sit amet, consectetur adipisicing elit

PNG

Featured
Red paint cup

Lorem ipsum dolor sit amet, consectetur adipisicing elit

JPG

New
Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit

PNG

Trend
Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit

JPG

Featured
Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit

JPEG

Hot

  <div class="container-fluid">
    <div class="row">
      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
        <div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
          <div class="p-4">
            <h5> <a href="#" class="text-dark">Red paint cup</a></h5>
            <p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
            <div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
              <p class="small mb-0"><i class="fa fa-picture-o mr-2"></i><span class="font-weight-bold">JPG</span></p>
              <a class="badge rounded-pill bg-primary">New</a>
            </div>
          </div>
        </div>
      </div>
      <!-- End -->

      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
        <div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-2.jpg" alt="" class="img-fluid card-img-top">
          <div class="p-4">
            <h5> <a href="#" class="text-dark">Blorange</a></h5>
            <p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
            <div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
              <p class="small mb-0"><i class="fa fa-picture-o mr-2"></i><span class="font-weight-bold">PNG</span></p>
              <div class="badge rounded-pill bg-secondary">Trend</div>
            </div>
          </div>
        </div>
      </div>
      <!-- End -->

      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
        <div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-3.jpg" alt="" class="img-fluid card-img-top">
          <div class="p-4">
            <h5> <a href="#" class="text-dark">And She Realized</a></h5>
            <p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
            <div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
              <p class="small mb-0"><i class="fa fa-picture-o mr-2"></i><span class="font-weight-bold">JPG</span></p>
              <div class="badge badge-warning px-3 rounded-pill font-weight-normal text-white">Featured</div>
            </div>
          </div>
        </div>
      </div>
</div>
      <!-- End -->

Pill Badges

Primary Secondary Success Danger Warning Info Light Dark 
  <span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

Background Colors

Primary Secondary Success Danger Warning Info Light Dark 
  <span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

Icon