What is Bootstrap SPAN?

CCNA 200-301

CCNP Enterprise

CCNP Security

CCIE Enterprise Lab

CCIE Security Lab

CCNP Service Provider

CCNP Data Center

CCNP Collaboration

CCIE DC Lab

2019-09-05

If you have any sort of interest in web development, you have likely heard about the Bootstrap. According to the official website, Bootstrap is considered to be the most popular CSS, HTML, and JS framework for developing responsive, mobile-first projects on the web.

It would be easy to send you over to their Getting Started page as well as call it a day. Their setup guide would be indeed a host of positive information - links to CDNs, explanations on how to install with Bower, npm, as well as Composer, information on integration with Autoprefixer and LESS, a bunch of templates, licenses, as well as translations - but it is considered to be certainly not a step by step guide to getting started, which very well might be considered in the spirit of autodidactism.

When I discovered Bootstrap just a few years ago, responsive designs were still gaining in popularity, and not necessarily the expected norm. Having only ever made websites from scratch, I was a bit confused about the entire concept of a framework. I had imagined it's even more confusing for beginners who would now be expected to learn responsive design concepts and Bootstrap and JavaScript libraries, in addition to CSS, HTML, and JS.

This guide would be meant as a first look into Bootstrap for beginners, so you won't be going into LESS and Sass integration, which are more intermediate or advanced concepts. While it would be written for the current, stable version Bootstrap 3, the concepts would be remaining the same for future versions.

Below we will certain details regarding the Bootstrap, but if you wish to have practical knowledge, SPOTO would be the best place for it.

What is Bootstrap?

Bootstrap could be boiled down to three main files:

• bootstrap.css - a CSS framework.

• bootstrap.js - a JavaScript or jQuery framework.

• glyphicons - a font, a set of icon font.

Additionally, Bootstrap would be required jQuery to function. jQuery is considered to be an extremely popular and widely utilized the JavaScript library, that both simplifies as well as adds cross-browser compatibility to JavaScript.

Everything else you might happen across while learning the Bootstrap documentation - Grunt, Sass, Gulp, LESS, bower, npm, etc – isn’t considered necessary, to begin with, Bootstrap. These are task runners, preprocessors, installation aids, as well as package managers, so don't get discouraged if you don't know about how to use any of them yet.

Why is a framework important? Do I need to use one?

Understanding the Fundamentals of Responsive Design, which I would recommend reading if you wish to learn more about responsive design. However, frameworks are considered to be very popular and have many benefits, so it's quite important to learn about how to work with them.

Generally, every web project you work on would be needed to be responsive and work properly on all the major browsers, and likely to have some fallbacks for older browsers. Bootstrap would have a huge open source community that works on covering this so you wouldn’t have to. Additionally, when multiple developers all know the same system, they could work in better harmony – as well as it also makes it easier for the newcomers on a project to get up to speed.

The grid is probably considered to be one of the most essential aspects of the framework. It would be the basis on which the entire layout is created. Beyond that, Bootstrap's core CSS would also add helpful styling to tables, forms, buttons, lists, as well as images, and fully functioning navigation bars, while the core JavaScript would be added helpful code for creating modals, alerts, carousels, dropdowns, popups, and accordions.