ckportfolio.com - Bootstrap Exploration: Plugins

Bootstrap Exploration: Plugins

Plugins

Bootstrap also offers a number of plugins that allow you to get a taste of JS-based plugins without learning to use JavaScript. Below is the list of plugins that may interest you:

Note that while the necessary HTML syntax is more complicated than others (as evident in provided code samples), the result is an interesting one: Bootstrap has the ability to internally parse your HTML code and convert it into a fully functional, animated component.

Conclusion

While Bootstrap is a fairly opinionated framework that often pigeonholes developers into a narrow workflow, it also offers a highly flexible structure that you can experiment with and augment using your own CSS code. You are encouraged to check out the Examples section and other Bootstrap-based websites for more inspiration.

Code Sample: HTML

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

        <title>Hello, world!</title>
    </head>
    <body>

        <div class="container">
            <div class="row mt-3">

                <div class="col-3">
                    <h3>John Doe</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dignissim nisi, non accumsan libero. Vestibulum sed erat posuere, aliquet neque vitae, maximus lorem.</p>
                    <a href="http://google.com" class="btn btn-danger">
                        Hello World
                    </a>        
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                        Open Modal
                    </button>

                </div>
                <div class="col-9">
                    <h3>Lorem ipsum</h3>
                    <p>Nunc suscipit commodo scelerisque. Duis condimentum purus turpis, in semper lacus lobortis a. Sed commodo id nunc non congue. Morbi eget vehicula nibh. Sed efficitur risus eu erat porttitor vehicula at in erat. Curabitur malesuada felis a nibh consequat fermentum. Nam sit amet posuere quam, a dignissim lectus. Nullam et lobortis ligula. Etiam nec ligula pretium justo lobortis aliquam. Integer sit amet accumsan tellus, ac dignissim urna.</p>

                    <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="https://picsum.photos/800/400?image=200" class="d-block w-100" alt="slide 1">
                            </div>
                            <div class="carousel-item">
                                <img src="https://picsum.photos/800/400?image=250" class="d-block w-100" alt="slide 2">
                            </div>
                            <div class="carousel-item">
                                <img src="https://picsum.photos/800/400?image=275" class="d-block w-100" alt="slide 3">
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>
Fin