Create Button using bootstrap

Hello Friends,

Today in this blog we can create different types of button using Bootstrap and html. Earlier I have shared a blog on Create SVG Animated circle.

Bootstrap Button

Bootstrap provide a set of classes that are used to define appearance for buttons & the control the behavior to make responsive the classes are

  • btn – Base class
  • btn-sm – Button size small
  • btn-lg – Button size large
  • btn-block – Responsive
  • btn-link – Button as hyperlink
  • btn-group – Group a set of button
  • btn-group-sm – Small button group
  • btn-group-lg – Large button group
  • btn-group-vertical – Button group vertical
  • btn-group-vertical-sm – Group vertical small button
  • btn-group-vertical-lg – Group vertical large button
  • btn-group-horizontal – Button group horizontal
  • btn-group-horizontal-sm – Group horizontal small button
  • btn-group-horizontal-lg – Group horizontal large button
  • btn-primary
  • btn-secondary
  • btn-success
  • btn-danger
  • btn-outline-primary / secondary – Contextual with outline color and effect
  • btn-toolbar – Toolbar with a set of group
See also  Tesla Cybertruck Inspired UI Elements - cyberstyle.css

If you like this program (Custom Design) and want to get source code. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html>
    <head>
        <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">

    </head>
    <body>
        <div class="container">
            <dl>
                <dt> button colors</dt>
                <dd>
                    <button class="btn btn-primary btn-sm"> Submit </button>
                    <button class="btn btn-danger btn-lg">Cancel</button>
                    <button class="btn btn-link">Signout</button>
                </dd>
                <dt> Button Responsive</dt>
                <dd>
                    <button class="btn btn-primary btn-block"> Register</button>
                </dd>
                <dt> Button Outline</dt>
                <dd>
                    <button class="btn btn-outline-sucess">insert</button>
                    <button class="btn btn-otline-danger"> Delete</button>
                </dd>
                <dt> button group horizantal</dt>
                <dd>
                    <div class="btn-group">
                        <button class="btn btn-primary">Home</button>
                        <button class="btn btn-secondary"> About</button>
                    </div>
                </dd>
                <dt> button group vertical</dt>
                <dd>
                    <div class="btn-group-vertical">
                        <button class="btn btn-primary"> Home</button>
                        <button class="btn btn-secondary"> About</button>
                    </div>
                </dd>
                <dt> Button Tool Bar</dt>
                <dd>
                    <div class="btn-toolbar bg-primary justify-content-between"> 
                        <div class="btn-group">
                            <a href="../home.html" class="btn btn-primary">Home</a>
                            <a href="../about.html" class="btn btn-primary"> About</a>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-primary"> Search</button>
                        </div>
                    </div>
                </dd>
            </dl>
        </div>
    </body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *