Easily Create Responsive Websites Using Bootstrap

Easily Create Responsive Websites Using Bootstrap

Bootstrap is an HTML, CSS and JavaScript framework for developing responsive websites. It is easy to use, can be learned quickly and significantly improves productivity by saving many hours of development. In this tutorial, I will focus on the CSS part of the Bootstrap framework, the classes used when creating a responsive website.

Installation

Bootstrap files can be downloaded from their website and stored locally. Alternatively, you could use Boostrap CDN links. Add the following code to the tag:

 

There are a few things to note here. First, you would need to declare a HTML5 doctype. Since its core classes are mobile-friendly, you will also need to add a meta viewport tag:

 

There is no need to reset css styles for improved cross-browser rendering, as this feature is included in Boostrap by using Normalize.css.

Finally, if you use Bootstrap’s JavaScript features, jQuery needs to be included.

Breakpoints

By default, Bootstrap defines certain screen sizes at which the layout will change. The sizes are given in the following table:

For example, anything related to medium devices will be applied to the screen sizes between 992px and 1199px. Screens between 768px and 991px are classified as small devices, while the screen width less than 768px are extra small devices.

These breakpoints are just the default settings and can be customized on the compile and download page.

Containers

Containers are used to wrap all website content. There are two types of containers in Bootstrap:

  1. Fixed width container
  2. Full width container

Fixed width container has a different fixed size for each of the screen sizes mentioned above. It is used by adding the class .container to an element:

You can see the default container sizes in the following table:

Full width container always takes up 100% of the width, regardless of the screen size. At also applies left and right padding, so that the content does not touch the edge of the screen. Full width container is used by adding the class .container-fluid to an element:

Responsive Grid System

The responsive grid system is one of the most powerful Bootstrap features. It allows you to easily create grids that would look good on any device.

Like any grid, a Bootstrap grid has multiple columns, where each column must be a direct child of a row. Each row is a horizontal group of columns and must be located inside the container element, for proper alignment and padding. The maximum number of columns is 12. If more than 12 columns are placed within a single row, each group of extra columns will be shown in a new line.

Each column has its gutter (spacing between columns). It creates spacing between column content and aligns columns with other website content.

Grid columns are created by specifying the number of twelve available columns you wish to span. For example, if you want to create three equal columns, you would use .col-md-4 class for all three columns (4/12 = 1/3). Likewise, if you would like to create four equal columns, you would use .col-md-3 class (3/12 = 1/4). Columns don’t have to be equal, so you could have, for example, two columns where one column is .col-md-4 and the other is .col-md-8, which would mean that the second column would be two times larger than the first one.

Each screen size has its own column prefix (e.g. .col-md- is used for medium devices), which means that the columns will be horizontal above the breakpoint and stacked (one below each other) below it. For example, .col-md- columns will be stacked below 992px and horizontal above that screen size.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-sm-8
.col-sm-4

In the example above, the first row of columns will be stacked when the screen width is less than 992px. The same columns will be horizontal when the screen is larger than 992px. The second row will be stacked for screens smaller than 768px and horizontal for larger screens.

Show and Hide Elements

Bootstrap comes with a set of classes which allow us to easily show or hide certain elements, depending on the screen width. These classes are shown in a table for easy understanding:

For example, an element with the class .visible-md would be visible on screen widths between 992px and 1199px, a hidden in all others, while the class .visible-lg would make an element visible only on screens larger than 1200px. Of course, these classes can be combined to achieve the wanted layout.

Scale Images

Images can fit the layout by using .img-responsive class. This class makes the image 100% wide, while the height is set to automatic, resizing the image depending on screen width and keeping the aspect ratio. Also, the image becomes a block element.

To center responsive images, use .center-block class.

Other Features

In addition to responsive utilities, Bootstrap has many other features such as styling form elements, buttons, tables and more. Learn more about these features on their website.

devx-admin

devx-admin

Share the Post:
5G Innovations

GPU-Accelerated 5G in Japan

NTT DOCOMO, a global telecommunications giant, is set to break new ground in the industry as it prepares to launch a GPU-accelerated 5G network in

AI Ethics

AI Journalism: Balancing Integrity and Innovation

An op-ed, produced using Microsoft’s Bing Chat AI software, recently appeared in the St. Louis Post-Dispatch, discussing the potential concerns surrounding the employment of artificial

Savings Extravaganza

Big Deal Days Extravaganza

The highly awaited Big Deal Days event for October 2023 is nearly here, scheduled for the 10th and 11th. Similar to the previous year, this

5G Innovations

GPU-Accelerated 5G in Japan

NTT DOCOMO, a global telecommunications giant, is set to break new ground in the industry as it prepares to launch a GPU-accelerated 5G network in Japan. This innovative approach will

AI Ethics

AI Journalism: Balancing Integrity and Innovation

An op-ed, produced using Microsoft’s Bing Chat AI software, recently appeared in the St. Louis Post-Dispatch, discussing the potential concerns surrounding the employment of artificial intelligence (AI) in journalism. These

Savings Extravaganza

Big Deal Days Extravaganza

The highly awaited Big Deal Days event for October 2023 is nearly here, scheduled for the 10th and 11th. Similar to the previous year, this autumn sale has already created

Cisco Splunk Deal

Cisco Splunk Deal Sparks Tech Acquisition Frenzy

Cisco’s recent massive purchase of Splunk, an AI-powered cybersecurity firm, for $28 billion signals a potential boost in tech deals after a year of subdued mergers and acquisitions in the

Iran Drone Expansion

Iran’s Jet-Propelled Drone Reshapes Power Balance

Iran has recently unveiled a jet-propelled variant of its Shahed series drone, marking a significant advancement in the nation’s drone technology. The new drone is poised to reshape the regional

Solar Geoengineering

Did the Overshoot Commission Shoot Down Geoengineering?

The Overshoot Commission has recently released a comprehensive report that discusses the controversial topic of Solar Geoengineering, also known as Solar Radiation Modification (SRM). The Commission’s primary objective is to

Remote Learning

Revolutionizing Remote Learning for Success

School districts are preparing to reveal a substantial technological upgrade designed to significantly improve remote learning experiences for both educators and students amid the ongoing pandemic. This major investment, which

Revolutionary SABERS Transforming

SABERS Batteries Transforming Industries

Scientists John Connell and Yi Lin from NASA’s Solid-state Architecture Batteries for Enhanced Rechargeability and Safety (SABERS) project are working on experimental solid-state battery packs that could dramatically change the

Build a Website

How Much Does It Cost to Build a Website?

Are you wondering how much it costs to build a website? The approximated cost is based on several factors, including which add-ons and platforms you choose. For example, a self-hosted

Battery Investments

Battery Startups Attract Billion-Dollar Investments

In recent times, battery startups have experienced a significant boost in investments, with three businesses obtaining over $1 billion in funding within the last month. French company Verkor amassed $2.1

Copilot Revolution

Microsoft Copilot: A Suit of AI Features

Microsoft’s latest offering, Microsoft Copilot, aims to revolutionize the way we interact with technology. By integrating various AI capabilities, this all-in-one tool provides users with an improved experience that not

AI Girlfriend Craze

AI Girlfriend Craze Threatens Relationships

The surge in virtual AI girlfriends’ popularity is playing a role in the escalating issue of loneliness among young males, and this could have serious repercussions for America’s future. A

AIOps Innovations

Senser is Changing AIOps

Senser, an AIOps platform based in Tel Aviv, has introduced its groundbreaking AI-powered observability solution to support developers and operations teams in promptly pinpointing the root causes of service disruptions

Bebop Charging Stations

Check Out The New Bebob Battery Charging Stations

Bebob has introduced new 4- and 8-channel battery charging stations primarily aimed at rental companies, providing a convenient solution for clients with a large quantity of batteries. These wall-mountable and

Malyasian Networks

Malaysia’s Dual 5G Network Growth

On Wednesday, Malaysia’s Prime Minister Anwar Ibrahim announced the country’s plan to implement a dual 5G network strategy. This move is designed to achieve a more equitable incorporation of both

Advanced Drones Race

Pentagon’s Bold Race for Advanced Drones

The Pentagon has recently unveiled its ambitious strategy to acquire thousands of sophisticated drones within the next two years. This decision comes in response to Russia’s rapid utilization of airborne

Important Updates

You Need to See the New Microsoft Updates

Microsoft has recently announced a series of new features and updates across their applications, including Outlook, Microsoft Teams, and SharePoint. These new developments are centered around improving user experience, streamlining

Price Wars

Inside Hyundai and Kia’s Price Wars

South Korean automakers Hyundai and Kia are cutting the prices on a number of their electric vehicles (EVs) in response to growing price competition within the South Korean market. Many

Solar Frenzy Surprises

Solar Subsidy in Germany Causes Frenzy

In a shocking turn of events, the German national KfW bank was forced to discontinue its home solar power subsidy program for charging electric vehicles (EVs) after just one day,

Electric Spare

Electric Cars Ditch Spare Tires for Efficiency

Ira Newlander from West Los Angeles is thinking about trading in his old Ford Explorer for a contemporary hybrid or electric vehicle. However, he has observed that the majority of

Solar Geoengineering Impacts

Unraveling Solar Geoengineering’s Hidden Impacts

As we continue to face the repercussions of climate change, scientists and experts seek innovative ways to mitigate its impacts. Solar geoengineering (SG), a technique involving the distribution of aerosols

Razer Discount

Unbelievable Razer Blade 17 Discount

On September 24, 2023, it was reported that Razer, a popular brand in the premium gaming laptop industry, is offering an exceptional deal on their Razer Blade 17 model. Typically

Innovation Ignition

New Fintech Innovation Ignites Change

The fintech sector continues to attract substantial interest, as demonstrated by a dedicated fintech stage at a recent event featuring panel discussions and informal conversations with industry professionals. The gathering,

Import Easing

Easing Import Rules for Big Tech

India has chosen to ease its proposed restrictions on imports of laptops, tablets, and other IT hardware, allowing manufacturers like Apple Inc., HP Inc., and Dell Technologies Inc. more time