Button Styling in Bootstrap

Ethan Karla 399 28 Jul 2021

What is button styling in Bootstrap? How many button styles are there that we can use?

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

1 Answers

Anonymous User 29 Jul 2021

Button styles in Bootstrap are defined with the help of the .btn class to create a nice look and feel button with fewer lines of code. The .btn class can also be used with anchor tags and input tags.

If you are using the .btn class for an anchor tag to create collapsible buttons or any other feature, rather than linking to a new page or other section, you need to provide a proper description of their purpose within the page.

Let's have an example of button in Bootstrap :

<!doctype html>

<html lang='en'>

<head>

    <!-- Required meta tags -->

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>

    <title>Hello, world!</title>

</head>

<body>

    <div class='container'>

        <h2>Bootstrap Buttons</h2>

        <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>

    </div>

</body>

</html>

Output :

Hope this will help you.

Happy Coding!

forum

Button Styling in Bootstrap

Can you answer this question?

1 Answers