ckportfolio.com - Styling with Bootstrap Framework

Styling with Bootstrap Framework

Activating Bootstrap

As a simple, remotely hosted drop-in CSS file, Bootstrap features a variety of preset styles and class names that render HTML/CSS styling easy. While its distinctive look isn't for everyone or every project, it serves as a solid foundation for additional custom CSS code.

index.php

<!doctype html>
<html>

    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>
    <body>
...

As we are simply looking to change the look of the page without relying on additional JavaScript functionality, we can simply copy and paste the path to the remote CSS file.

Upon reloading the preview, there should be a number of subtle updates made to the layout.

Using Bootstrap

Bootstrap is an extensive library with long documentation, and it certainly requires careful reading and exploration. As part of this exercise, we can experiment with some of the simpler options.

Bootstrap offers a series of options under list group, and we can use one of the examples for list.php.

list.php

<?

    $query = "SELECT * FROM posts ORDER BY title ASC";
    $result = $conn->query($query);

?>

<div class="list-group mb-5">

    <? foreach ($result as $index => $row) { ?>

        <a href="?id=<? echo $row['id'] ?>" class="list-group-item">
            <? echo $row["title"] ?>
        </a>

    <? } ?>

</div>

As our original code was simple enough, the example can be easily incorporated into list.php.

In addition, our form can certainly benefit from Bootstrap's preset styles under Forms. By consulting some of the examples and applying necessary class names, the page looks much more familiar and sharp.

form.php

<form method="POST" action="post.php"> 

    <div class="form-group mt-5">
        <input class="form-control" type="text" name="title" placeholder="Title Area" required>
    </div>

    <div class="form-group">
      <textarea class="form-control" name="content" placeholder="Content Area" required></textarea>
    </div>

    <button class="btn btn-primary">Submit</button>
</form>

Finally, we can wrap the entire website content with a div element and apply extra padding to avoid sticking to the window edge.

index.php

...
    <body>

        <div class="p-5">

        <?

            include "sql.php";

            if ($_GET["id"] == "") {
                include "list.php";
            } else {
                include "view.php";
            }

            include "form.php";

        ?>

       </div>

    </body>
</html>

Bootstrap is much more renowned for their intuitive approach to handling columned layouts, but simply adding a padding to the container helps plenty.

The result is a much more visual design, quicky implemented by relying on Bootstrap's CSS code.

Fin