bootstrap

bootstrap, css, html

I had previously ran a WordPress site that hosted an example of bootstrap. I messed around with bootstrap when creating a custom WordPress theme from scratch using HTML, CSS, and PHP. Linking bootstrap to my project allowed me to create a theme that was responsive to the size of the view port. This enabled the website to resize and show / hide elements accordingly when the browser window was resized or otherwise manipulated.

Being a bit of a data hoarder, I still had the WordPress database laying around and recently recovered it along with some old content within. Though these are outdated and no longer being worked on, they are neat to look back on. Not only is the bootstrap example found below old, but the writing is identical to the post I made back in 2016. For this reason, though I’m writing this short explanation now in 2020, this post is dated according to the original post date.

Bootstrap Web Development

October 20, 2016

Bootstrap is one of the many CSS frameworks available to make the common tasks in CSS easier to achieve, saving you time in rewriting various CSS rules and selectors. To use Bootstrap, you will have to include some files in your workspace, and link them accordingly so they will be recognized across your entire project. There are a few ways to do this, the easiest way is to include the CSS within the ‘Head’ of your website. There are, however, a few other ways to do this that could be considered healthier for your web page. For the sake of simplicity and to save you any headaches during what I’m assuming is your learning process, we will stick to the basics.

1
2
3
4
5
6
7
8
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

So, after you’ve included this into your HTML document, it should look something like this…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <head>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  </head>
  <body>
    Your HTML content...
  </body>
</html>

Ok, so we’ve included Bootstrap into our HTML project, but how do we use it?
Bootstrap is a CSS frameworks, which consists of classes you can apply to your HTML. If you’re completely new to Bootstrap, Hacker Themes provides a great reference of all the classes bootstrap contains. Looking at this can be a bit overwhelming at first, but it’s not so bad once you get into it. We won’t get into most the classes here, we’re just going to reference the Grid section for now. A grid must be created inside a container, which contains columns inside of rows. Bootstrap 4.0 uses a 12 column layout. What this means is you can control the placement of content with 12 responsive columns across any size device.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
  <head>
    Head content...
  </head>
  <body>

    <div class="container-fluid">
      
      <div class="row">
        <div class="col-xs-10">Header-Content</div>
        <div class="col-xs-2">Image, logo, Motto</div>
      </div>
      
      <div class="row">
        <div class="col-xs-8">Main-Content</div>
        <div class="col-xs-4">Sidebar-Content</div>
      </div>
      
      <div class="row">
        <div class="col-xs-12">Footer-Content</div>
      </div>
    
    </div>

  </body>
</html>

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs. You’ll notice in the example above that each row has a set of columns that add up to be 12, following the 12 column layout that we know Bootstrap 4.0 utilizes. If you throw this code together, you’ll end up with this responsive layout. This is awful looking in its current state, I’ve applied some simple CSS to make it easier for you to see what’s happening while you resize the window or rotate your mobile device, but this does little for the overall appearance of the layout. Once you add some content, and a little more CSS to style the page, you have a responsive web page! From this point on, just tackle the layout one section at a time. Bootstrap contains many useful tools, aside from the grid classes, that allow you to create buttons, navigation menus, carousels, and much more. You can use these classes together to create not only a great looking web page, but a responsive web page that will display according to the viewport of the visitor. This prevents from content appearing in an undesirable way, often times making it difficult or impossible to navigate. Knowing this, with a little effort I was able to create the WordPress theme you’re viewing. In the future, I’ll return to elaborate on using Bootstrap and some of its many tools, but the subject is too large to fit into one post.

Very basic example of how Bootstrap can be utilized to create scaling web pages. You can view the html code by inspecting the following page within your browser.

Bootstrap Example

Alternatively, without bootstrap, the same HTML would look like this example