Introduction to Bootstrap and Basic Building Blocks

bibhu_bib avtar

Written by:

Bibhudatta,  7 min read,  updated on September 17, 2023

Bootstrap is predominantly based on CSS3. CSS3 has a major shift with comparison to CSS1 & CC2 and is currently the latest version. It has come up with a number of powerful capabilities and boosted the mobile-first philosophy of the technology. Some of the very crucial inclusions are Media queries, Selectors, Cascading and Inheritance, Template layouts, Namespaces, MathML, Flexible and Grid layouts, Transformations and Transitions, and so on.

Designing and building the website that would properly render in almost all the devices irrespective of the device size, browser, screen size, and so on widely known as Responsive web design.

Bootstrap, frontend frameworks which will help you design and develop a Responsive Web application in a much optimized and efficient way.

  • Bootstrap is a frontend framework for faster and easier web development in today’s fiercely competitive world of mobile.
  • It uses HTML,CSS and JavaScript
  • Twitter released Bootstrap as an open source in August 2010.
  • Although there are few similar frameworks available in market, Bootstrap is most popular and widely used one.

Why and Where to use Bootstrap?

Following are some of the points where bootstrap is the key to use,

  • Responsive design: Responsive Web Design means designing and building your website that would properly render in almost all the devices irrespective of the device size, browser, screen size, and so on.
  • Automatic browser support: The ability of a Web browser to effectively display the HTML code and execute the scripts on Web pages.So thatall current browsers will render the page the same.
  • The mobile-first approach: The technique of creating mobile websites first and then progressively enhancing them to create the desktop version. It goes parallel with the term Progressive Enhancement, which means you are designing your website bottom-up (mobile, tablet and desktop).
  • Easy adaption: This is similar to the progressive enhancement technique, where the focus goes to the user rather than the browser.

Basic Building blocks of Bootstrap

As we mentioned earlier the overall structure of Bootstrap contains, CSS, Components and JavaScript.

  • Bootstrap comes with fundamental HTML element styled, global CSS classes, Classes for advanced grid patterns. It also includes lots of enhanced and extended CSS classes.
  • Bootstrap offers rich set of reusable and built-in components such as breadcrumbs, progressbar, alerts and navigation bars. These components are technically custom CSS classes specially crafted for specific purposes.
  • Bootstrap framework comes with a number of ready to use JavaScript plug-ins. So, when you need to create pop-up windows, carousels or tooltips and so on, you just use one of the pre-packaged JavaScript plug-ins.

[box style=”0″]

Did you know?
The Bootstrap JS plug-in are built on top of JQuery; hence the code you would write in JS in Bootstrap will be based on JQuery. Bootstrap also provides the feature and flexibility of customization where you can deploy your own branding and themes, instead of using the bootstrap default ones.