An Interest In:
Web News this Week
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
Some of Our Sources
- BoingBoing
- Engadget
- Techcrunch
- TutsPlus - Design
- You The Designer
- Fuel Your Creativity
- Web Designer Depot
- FanExtra - PSD
- Noupe
- Android Headlines
Help Webnuz
Referal links:
April 20, 2022 08:57 am GMT
Original Link: https://dev.to/frontendshape/bootstrap-5-borders-style-button-example-4khl
Bootstrap 5 borders style button example
Hello friend, Toady you will learn how to use bootstrap 5 border style button using borders classes. For this section we will not use any css or inline css class, We can create good looking button using only bootstrap 5 classes let see. first you need to setup bootstrap 5 project. you can read below article.
How to install & setup bootstrap 5
How to use Bootstrap 5 borders style button
1) First you need to create button element and give .btn name.
2) Then Apply .bg-dark for background & .text-white class.
3) Next, you need to use .border and border size class border-3.
4) Finally you need to use border less class like border-bottom-0.
Example
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Bootstrap 5 borders style button example</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <button class="border btn border-3 bg-dark text-white border-bottom-0 border-top-0 border-end-0"> Border Button </button> <button class="border border-primary btn border-3 bg-dark text-white border-bottom-0 border-top-0 border-end-0"> Border Button </button> <button class="border border-success btn border-3 bg-dark text-white border-bottom-0 border-top-0 border-end-0"> Border Button </button> <button class="border border-warning btn border-3 bg-dark text-white border-bottom-0 border-top-0 border-end-0"> Border Button </button> <button class="border border-info btn border-3 bg-dark text-white border-bottom-0 border-top-0 border-end-0"> Border Button </button> <button class="border border-light btn border-3 bg-dark text-white border-bottom-0 border-top-0 border-end-0"> Border Button </button> <button class="border border-danger btn border-3 bg-dark text-white border-bottom-0 border-top-0 border-end-0"> Border Button </button> </body></html>
Original Link: https://dev.to/frontendshape/bootstrap-5-borders-style-button-example-4khl
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To