Briefing on Bootstrap

Today’s blog will cover the fundamentals of bootstrap: the most popular CSS framework for developing responsive websites. This tool especially comes in useful in designing mobile-first ( A mobile view unlike viewing on a Desktop). Bootstrap is an easy to use plugin for beginners when trying to develop a responsive website. So, when we write on this we want to make sure we achieve a visual hierarchy for our content. Without fully understanding the works of CSS, beginners would have an extremely difficult time, but luckily we have bootstrap to save the day. Personally, this program has been a great help when designing layouts for sites that I have created over the course of two years. Its primary tool is the grid system. “It’s based on “a series of containers, rows, and columns to layout and aligns content”(Bootstrap.com)

Bootstrap’s Important functions:

First we’ll take a look at the grid system. Ever wonder how websites were able to create such flawless visual layouts with multiple layers of text and images all over the page? Well, it wouldn’t be possible without a grid. Grids are created within containers and contain several rows and columns. Bootstrap’s grid system allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns.
This is a great concept to practice and will allow you to create a visual hierarchy throughout your site. For example: let’s say we want to create a layout within our page body that will display three columns in a single row. Our command would look like this

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

You must be wondering well what’s with the term span 1-12 and how will it be used? Right.. So here’s another way to write the same exact three columns in a single row. 33.33% 33.33% 33.33%

So, the cool thing about coding is that there is never just one way to do anything even within the bootstrap framework there are multiple ways to get something done. There are a few differences as you can see from the two examples, and the only time you’d really need to be cautious of which way you are wanting to write this code depends on the layout you’re hoping to achieve. If you wanted something to have two columns but one side being larger than the other, you’d want to do the span 4 and span 8 combo in the image above. Bootstrap offers a lot of inline CSS in their framework as well. A few of these are image sizing, buttons, typography etc. All of these are easily explained and have several examples within their documentation section of the bootstrap website. “First of all, Bootstrap is the most popular framework for creating layouts.” Some other reasons for its popularity are: “Bootstrap’s responsive CSS adjusts to phones, tablets, and desktops. Mobile-first styles are part of the framework, Bootstrap is compatible with all modern browsers.” (HTMLgoodies.com) My next source is their main website at bootstrap.com. This site lists examples and themes, and my personal favorite section of this site is the documentation page. This is where every usable code is displayed and explained thoroughly. Finally, I’d like to share another example of this website, its connection to its audience with their blog page. This is where they update the community on updates and new concepts that people would like to see with this program.

Introduction on how to set it up:

Alrighty, our first order of business is to get bootstrap setup into your workspace. We will need to go to this site as given = https://getbootstrap.com/ , and scroll down to the Read Insulation Docs. As you read through this page you will be given two options whether to download bootstrap onto your computer or use the CDN which is short for content distribution network. Personally, I use the CDN link provided by the client which looks like this.

You’ll need to copy and paste this link into your . Placing this either before or after your linked stylesheet will be fine. The one thing to keep in mind as you work with Bootstrap in this way is that not every new page will be connected right away. You will need to copy and past this same link into every page head that you are wanting to incorporate Bootstrap with.

In conclusion:

Bootstrap’s framework allows for easy to use structuring of your site with all the perks of built in CSS and Javascript with its PHP forms for contact pages and so for and so on.

Sources:

• Bootstrap.com
• https://getbootstrap.com/
• HTMLgoodies.com