"Custom buttons bootstrap 5.1.3"
Bootstrap 4.1.1 Snippet by BrCodeSnippets

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="pt-br" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <style> .rounded-20 { border-radius: 20px } </style> </head> <body> <!-- created by @BrCodeSnippets --> <div class="container mt-3 pt-3"> <div class="row g-3 text-center"> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-info w-100" name="button">button info</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-warning w-100" name="button">button warning</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-danger w-100" name="button">button danger</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-secondary w-100" name="button">button secondary</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-primary w-100" name="button">button primary</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-light border w-100" name="button">button light</button> </div> <hr> </div> <div class="row g-3 text-center"> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-info w-100 btn-lg py-3" name="button">button info</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-warning w-100 btn-lg py-3" name="button">button warning</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-danger w-100 btn-lg py-3" name="button">button danger</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-secondary w-100 btn-lg py-3" name="button">button secondary</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-primary w-100 btn-lg py-3" name="button">button primary</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-light border w-100 btn-lg py-3" name="button">button light</button> </div> <hr> </div> <div class="row g-3 text-center"> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-info rounded-20" name="button">button info</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-warning rounded-20" name="button">button warning</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-danger rounded-20" name="button">button danger</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-secondary rounded-20" name="button">button secondary</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-primary rounded-20" name="button">button primary</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-light border rounded-20" name="button">button light</button> </div> <hr> </div> <div class="row g-3 text-center"> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-outline-info w-100 btn-lg py-3" name="button">button info</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-outline-warning w-100 btn-lg py-3" name="button">button warning</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-outline-danger w-100 btn-lg py-3" name="button">button danger</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-outline-secondary w-100 btn-lg py-3" name="button">button secondary</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-outline-primary w-100 btn-lg py-3" name="button">button primary</button> </div> <div class="col-6 col-md-4 col-xl-2"> <button type="button" class="btn btn-outline-light border w-100 text-dark btn-lg py-3" name="button">button light</button> </div> <hr> <div class="d-flex"> <button class="btn btn-primary w-50 me-md-2 shadow rounded-0 " type="button">Button</button> <button class="btn btn-primary w-50 shadow rounded-0 bg-gradient" type="button">Button</button> </div> <div class="d-grid gap-1 d-md-flex justify-content-md-end"> <button class="btn btn-danger me-md-2 px-5" type="button">Button danger</button> <button class="btn btn-success px-5" type="button">Button success</button> </div> </div> </div> </body> </html>

Related: See More

Vue Material Dashboard
Custom Navbar Bootstrap 4
Custom Search input

Questions / Comments: