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
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
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://1.bp.blogspot.com/-rXkZoN2rSGI/YJhE9Cnzq9I/AAAAAAAAcy8/1JK67sqb7NoSbve96O4zP_LzU5yVlr6cgCLcBGAsYHQ/s0-rw/og_237-design--logo.jpg" class="img-fluid" alt="237 design">
</div>
<div class="col-md-4">
<img src="https://1.bp.blogspot.com/-rXkZoN2rSGI/YJhE9Cnzq9I/AAAAAAAAcy8/1JK67sqb7NoSbve96O4zP_LzU5yVlr6cgCLcBGAsYHQ/s0-rw/og_237-design--logo.jpg" class="img-fluid" alt="237 design">
</div>
<div class="col-md-4">
<img src="https://1.bp.blogspot.com/-rXkZoN2rSGI/YJhE9Cnzq9I/AAAAAAAAcy8/1JK67sqb7NoSbve96O4zP_LzU5yVlr6cgCLcBGAsYHQ/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://1.bp.blogspot.com/-oK166W2iLoM/XFHDd6qo2NI/AAAAAAAASm4/VeKvaiYbRXYFzAxYSJtESEqwqCx5lGBRACLcBGAs/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://1.bp.blogspot.com/-oK166W2iLoM/XFHDd6qo2NI/AAAAAAAASm4/VeKvaiYbRXYFzAxYSJtESEqwqCx5lGBRACLcBGAs/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://1.bp.blogspot.com/-oK166W2iLoM/XFHDd6qo2NI/AAAAAAAASm4/VeKvaiYbRXYFzAxYSJtESEqwqCx5lGBRACLcBGAs/s300/237-design-logo_featured.png" alt="">
</a>
</div>
</div>
Bootstrap photo gallery
<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>