forum

home / developersection / forums / button styling in bootstrap

Ask Question

Button Styling in Bootstrap

Ethan Karla 303 28-Jul-2021

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

bootstrap

Updated on 28-Jul-2021

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.

Can you answer this question?

Answer

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

Ethan Karla

Can you answer this question?

1 Answers

Liked By