The basics of Bootstrap
Published: 2023-10-06 19:41:07

## Introduction
Bootstrap is a free, open-source front-end development framework for creating websites and web apps. It is used to make front-end development more consistent. 

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter in mid-2010 as a framework to encourage consistency across internal tools.

## Buttons
One of the ways Bootstrap helps to make code more consistent is with its button component. Here's an example of said component.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pm6pfluqpecpgp8g7pi.png)
```

            <div class="content">

                <div id="example">
                    <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>

            </div>
```
[Bootstrap button component](https://getbootstrap.com/docs/5.3/components/buttons/)
Here's an example of my attempt to make these buttons use basic HTML and CSS.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4b8zypjn7duxadpku9qu.png)
**HTML**
```
 <div class="content">

                <div id="interests">
                    <button type="button" class="btn" id="primary">Primary</button>
                    <button type="button" class="btn" id="secondary">Secondary</button>
                    <button type="button" class="btn" id="success">Success</button>
                    <button type="button" class="btn" id="danger">Danger</button>
                    <button type="button" class="btn" id="warning">Warning</button>
                    <button type="button" class="btn" id="info">Info</button>
                    <button type="button" class="btn" id="light">Light</button>
                    <button type="button" class="btn" id="dark">Dark</button>

                    <button type="button" class="btn" id="link">Link</button>
                </div>

            </div>
```
**CSS**
```
.btn {
            width: 75px;
            height: 30px;
            border-radius: 10px;
        }

        #primary {
            background: #0d6efd;
            color: white;
            border: #0d6efd;
        }

        #secondary {
            background: #6c757d;
            color: white;
            border: #6c757d;
        }

        #success {
            background: #198754;
            color: white;
            border: #198754;
        }

        #danger {
            background: #dc3545;
            color: white;
            border: #dc3545;
        }

        #warning {
            background: #ffc107;
            color: black;
            border: #ffc107;
        }

        #info {
            background: #0dcaf0;
            color: black;
            border: #0dcaf0;
        }

        #light {
            background: #f8f9fa;
            color: black;
            border: #f8f9fa;
        }

        #dark {
            background: #212529;
            color: white;
            border: #212529;
        }

        #link {
            background: transparent;
            color: var(link);
            border: transparent;
        }
```
It took me more lines of code to get a similar effect.
Bootstrap is a good way to shorten and keep code consistent.
[Bootstrap's home page](https://getbootstrap.com/)