loading...

Bootstrap 3 – Getting Started with Bootstrap

The styling and presentation of your website is imperative, as it plays an important role in creating a sublime user experience. Therefore, you need to acquire design skills, which help you to create attractive websites. Add deadlines to the project where time is imperative and you realize you have quite a task at hand. Several toolkits and frameworks have come to the fore to ease and streamline the task of web designing but none comes close to the open source framework, Bootstrap.

Since 2013, Bootstrap has become one of the most popular projects on the code-sharing platform GitHub. It has good community support and a vast ecosystem including templates and extensions built around it. With a modular approach, Bootstrap saves you a considerable amount of time and effort allowing you to focus on the core parts of your web development projects. Released initially by Twitter to maintain consistency in their internal web designing and development projects, Bootstrap has evolved and since the release of Version 3 has been licensed under the open source MIT license.

Mobile-first design

With the advent of mobile phones and tablets, responsive web design is the need of the hour. Earlier, there was the graceful degradation approach wherein you build a website for desktops and then remove features and adapt it for small screen sizes with a lesser set of capabilities resulting in a watered down, subpar browsing experience.

With the release of Bootstrap 3, a mobile-first approach was implemented thereby helping you to create websites that function efficiently on mobile platforms despite the platform constraints. This included taking into account all the restrictions of mobile devices and creating a website that is powerful with cross-browser compatibility giving your website users an awesome mobile experience. Using progressive enhancement techniques, you then add other features for desktop users thereby increasing the accessibility significantly. Thus, your website is well-equipped to handle changes regardless of whether you are using an iPad device, a Windows PC, or any other platform of your choice.

Let’s consider that we design a navigation bar for a web page. On a desktop screen, the web page will be displayed as follows:

It is quite evident that the website displays the navbar brand Packt Publishing alongside the menu options such as Books and Videos, Articles, Categories, and Support with the search field on the right-hand side.

However, on a small screen mobile phone, the web page would be displayed as follows:

On clicking the expandable mobile navigation icon displayed at the top right corner of the mobile screen, the following screen will be displayed:

Thus, you can see the mobile-first approach of Bootstrap demonstrated by the preceding screenshots.

Comments are closed.

loading...