Borders
BorderBorder-topBorder-rightBorder-bottomBorder-left
<span className="border border-container d-inline-flex">
<span className="fs-11 text-gray-5 m-auto">Border</span>
</span>
<span className="border-top border-container d-inline-flex">
<span className="fs-11 text-gray-5 m-auto">Border-top</span>
</span>
<span className="border-end border-container d-inline-flex">
<span className="fs-11 text-gray-5 m-auto">Border-right</span>
</span>
<span className="border-bottom border-container d-inline-flex">
<span className="fs-11 text-gray-5 m-auto">Border-bottom</span>
</span>
<span className="border-start border-container d-inline-flex">
<span className="fs-11 text-gray-5 m-auto">Border-left</span>
</span>>
Remove borders
No-BorderTopRightBottomLeft
<span className="border-0 border-container d-inline-flex">
<span className="fs-11 text-gray-5 m-auto">No-Border</span>
</span>
<span className="border border-top-0 border-container d-inline-flex">
<span className="fs-11 text-gray-5 m-auto">Top</span>
</span>
<span className="border border-end-0 border-container d-inline-flex">
<span className="fs-11 text-gray-5 m-auto">Right</span>
</span>
<span className="border border-bottom-0 border-container d-inline-flex">
<span className="fs-11 text-gray-5 m-auto">Bottom</span>
</span>
<span className="border border-start-0 border-container d-inline-flex">
<span className="fs-11 text-gray-5 m-auto">Left</span>
</span>
Border Widths
1px2px3px4px5px
<span className="border border-container d-inline-flex border-1">
<span className="fs-11 text-gray-5 m-auto">1px</span>
</span>
<span className="border border-container d-inline-flex border-2">
<span className="fs-11 text-gray-5 m-auto">2px</span>
</span>
<span className="border border-container d-inline-flex border-3">
<span className="fs-11 text-gray-5 m-auto">3px</span>
</span>
<span className="border border-container d-inline-flex border-4">
<span className="fs-11 text-gray-5 m-auto">4px</span>
</span>
<span className="border border-container d-inline-flex border-5">
<span className="fs-11 text-gray-5 m-auto">5px</span>
</span>
Border colors
bd-primarybd-secondarybd-successbd-dangerbd-warningbd-infobd-lightbd-darkbd-white
<span class="border border-container border-primary d-inline-flex">
<span class="fs-11 text-primary m-auto">bd-primary</span>
</span>
<span class="border border-container border-secondary d-inline-flex">
<span class="fs-11 text-secondary m-auto">bd-secondary</span>
</span>
<span class="border border-container border-success d-inline-flex">
<span class="fs-11 text-success m-auto">bd-success</span>
</span>
<span class="border border-container border-danger d-inline-flex">
<span class="fs-11 text-danger m-auto">bd-danger</span>
</span>
<span class="border border-container border-warning d-inline-flex">
<span class="fs-11 text-warning m-auto">bd-warning</span>
</span>
<span class="border border-container border-info d-inline-flex">
<span class="fs-11 text-info m-auto">bd-info</span>
</span>
<span class="border border-container border-light d-inline-flex">
<span class="fs-11 text-gray-2 m-auto">bd-light</span>
</span>
<span class="border border-container border-dark d-inline-flex">
<span class="fs-11 text-dark m-auto">bd-dark</span>
</span>
<span class="border border-container border-white d-inline-flex">
<span class="fs-11 text-dark m-auto">bd-white</span>
</span>
Border color Styling
Below Shows Danger Border
Customizing borders with backgrounud colors
<div className="mb-4">
<Form.Label htmlFor="exampleFormControlInput1" className="form-label">Email
address</Form.Label>
<Form.Control type="email" className="form-control border-success"
id="exampleFormControlInput1" placeholder="name@example.com"/>
</div>
<div className="h4 pb-3 mb-4 text-danger border-bottom border-danger">
Below Shows Danger Border
</div>
<div
className="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end mb-1">
Customizing borders with backgrounud colors
</div>
Border with opacity
This is default success border
This is 75% opacity success border
This is 50% opacity success border
This is 25% opacity success border
This is 10% opacity success border
<div className="border border-success p-2 mb-2">This is default success border</div>
<div className="border border-success p-2 mb-2 border-opacity-75">This is 75%
opacity
success border
</div>
<div className="border border-success p-2 mb-2 border-opacity-50">This is 50%
opacity
success border
</div>
<div className="border border-success p-2 mb-2 border-opacity-25">This is 25%
opacity
success border
</div>
<div className="border border-success p-2 border-opacity-10">This is 10% opacity
success
border
</div>
Border Radius







<img src={"../../../assets/images/media/media-58.jpg"} className="bd-placeholder-img rounded" alt="..."/>
<img src={"../../../assets/images/media/media-58.jpg"} className="bd-placeholder-img rounded-top" alt="..."/>
<img src={"../../../assets/images/media/media-58.jpg"} className="bd-placeholder-img rounded-end" alt="..."/>
<img src={"../../../assets/images/media/media-58.jpg"} className="bd-placeholder-img rounded-bottom" alt="..."/>
<img src={"../../../assets/images/media/media-58.jpg"} className="bd-placeholder-img rounded-start" alt="..."/>
<img src={"../../../assets/images/media/media-58.jpg"} className="bd-placeholder-img rounded-circle" alt="..."/>
<img src={"../../../assets/images/media/media-58.jpg"} className="bd-placeholder-img rounded-pill" alt="..."/>
Sizes






<img src={"../../../assets/images/media/media-58.jpg"} className="bd-placeholder-img bd-placeholder-img rounded-0" alt="..."/>
<img src={"../../../assets/images/media/media-58.jpg"} className="bd-placeholder-img bd-placeholder-img rounded-1" alt="..."/>
<img src={"../../../assets/images/media/media-58.jpg"} className="bd-placeholder-img bd-placeholder-img rounded-2" alt="..."/>
<img src={"../../../assets/images/media/media-58.jpg"} className="bd-placeholder-img bd-placeholder-img rounded-3" alt="..."/>
<img src={"../../../assets/images/media/media-58.jpg"} className="bd-placeholder-img bd-placeholder-img rounded-4" alt="..."/>
<img src={"../../../assets/images/media/media-58.jpg"} className="bd-placeholder-img bd-placeholder-img rounded-5" alt="..."/>