The basics of Bootstrap

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.

            <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
Here's an example of my attempt to make these buttons use basic HTML and CSS.

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