Learning to Code #5 | Bootstrap Framework

Learning to Code Bootstrap Flatlay

The impression I have of Bootstrap, in the time taken to learn it, is that it is a bit of love/hate thing. Especially within the wider developer community. Some people love it, as it provides responsive websites, with less effort. Whilst others feel it is too simple with not enough customisation. They want the responsive elements directly coded into a site using unique/custom code. Although I personally enjoy using it, I can understand both points of view. Here is some information on exactly what Bootstrap is and how it can be useful. Also some of the issues that arise if you choose to solely rely on it.

What is Bootstrap?

Bootstrap is a free and open source, responsive framework and toolkit used by front end developers. It was originally created by the developers at Twitter. Its use was to create consistency across tools within the company (according to Wikipedia). Released as an open source project in 2011, it is kept up to date via its Github repository and currently running version 4.0.

It uses HTML and CSS style sheets to create a modular system that has different components you can add to your site. You use these components within their 12 column layout which create a responsive grid system. This grid system responds to pre defined media queries (or you can add your own) and it is this responsive resizing of content that makes it so appealing to developers. It is already ready for building mobile friendly sites without having to do an enormous amount of extra coding. Using their CSS classes you assign attributes according to how you want your website to respond (e.g. sm, md, lg, xl), which depends on the screen/device it will be displayed on.

Bootstrap uses HTML, CSS and in some cases javascript/jquery plugins to create all of the components they have available. These components such as collapsible navigation bars and alerts can be directly added to your code. They can then be customized according to their preset style options, or your own custom CSS.

Why you should use Bootstrap.

As I just mentioned, you can just use the grid with predefined media queries screen sizes etc using responsive break points to adjust to the user’s screen size. Which makes it brilliant when building websites for multiple devices.

There are tonnes of pre styled components to choose from that you can simply use and edit to suit your needs.

At the very basic level, you only need a knowledge of HTML and CSS to be able to implement the bootstrap framework. However, I will say the more you understand, the more you can do with it and the less ‘clunky’ it will seem.

Using the predefined bootstrap style sheets really cuts down on the amount of code you have to write out. Especially when a lot of the components can be copied from their example/starter code and customized to your site.

I found this a really easy one to learn and it helps cut down time spent trying to fix things when they need to look good on all screen sizes. It can also teach you a bit about media queries, without getting too complicated.

How does Bootstrap work?

Either download it and have directly in your website files or use the bootstrap CDN (content delivery network) to be up and running faster. This is my preferred way to use it. They even provide a starter template that has all of the <link> and <script> tags with the CDN links ready to go.

Once you are all set up, you can start to think about your layout. How should you lay out your website components within the Bootstrap 12 column grid? To do this you use a <div> with the class of ‘container’ followed by nesting <divs> with classes of “row” and “col” depending on your needs.

For example to create two rows. The first with divs of 8 column and 4 column width, and the second with divs of equal 6 column width:

<div class="container>
  <div class="row">
    <div class="col-sm-8">
       8 Column Width
    </div>
    <div class="col-sm-4">
       4 Column Width
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
       6 Column Width
    </div>
    <div class="col-md-6">
       6 Column Width
    </div>
  </div>
</div>

These containers, columns and rows, are the elements of bootstrap that have predefined media queries. So whatever content you wrap in them, it will have these responsive characteristics.

Finally, you add in your Bootstrap or custom components, here are a few of my favourites;

  • Collapsible Navbar
  • Jumbotron
  • Forms
  • Modals – great for easy sign up pop ups etc

Once you have everything added into your code, you can start playing around with different column widths and containers to edit the layout of your website.

Then, in terms of front end development/design, all you have left is to add all of the website content and copy.

What are the problems with Bootstrap?

I said right at the beginning of this post that some people don’t like you to use Bootstrap. As this is the case, I would always recommend learning how to create responsive/modular websites using your own code first. This will not only be good for you as you learn and grow as a developer, but it will also prevent any awkward moments. Bootstrap can have a tendency to make you a little lazy, especially if you are just starting out. Bootstrap is a brilliant toolkit that can make your life a lot easier.

The impression I have of Bootstrap, in the time taken to learn it, is that it is a bit of love/hate thing. Especially within the wider developer community. Some people love it, as it provides responsive websites, with less effort. Whilst others feel it is too simple with not enough customisation. They want the responsive elements directly coded into a site using unique/custom code. Although I personally enjoy using it, I can understand both points of view. Here is some information on exactly what Bootstrap is and how it can be useful.

Just don’t be caught out by not knowing how to code from scratch if you have to. As I mentioned before not all companies will want you to use Bootstrap. This can happen for various reasons, so make sure you don’t get caught out! Always come from a place of wanting to learn everything, then using the tools to make that easier, rather than the other way around!

Another issue that can arise is a lack of imagination. Due to the many predefined styles to help your site look professional with less design skill, your websites may end up looking similar. This could be off-putting to any potential new clients.

You can work around this by understanding enough to be able to fully customise each component to your needs.

If you have tried or are currently using Bootstrap let me know what some of your pros and cons are. Do you love it and use it regularly? Or maybe you avoid it at all costs? Let me know in the comments as I would love to hear more opinions on its use.

You can read the rest of the Learning to Code series here.

Leave a Reply

Your email address will not be published. Required fields are marked *