Responsive web design with bootstrap 4

Responsive web design with bootstrap 4

In this blog, I will teach you a very easy way to design a fully responsive Website with Bootstrap classes. Without Bootstrap it is difficult for beginners to create responsive Webpages. So, to understand Bootstrap you should have a basic knowledge of HTML and CSS. Well, I will explain a little bit of HTML and CSS before discussing Bootstrap classes for your convenience. If you do not know HTML then I would suggest you first understand the basics of HTML.

Basics of HTML

If you have come to this Blog it means you already know what is HTML. Well, HTML is a must to develop a website. You should know the basics of HTML like "HTML Elements, Attributes, Table, Form etc".As you know the HTML tag has following two parts:

  1. Head Tag
  2. Body Tag

In Head Tag we have 'Title Tag' where we add Title of the Page. Also in Head tag we add 'Meta tags', 'style tag', 'link tags' and 'script tags'.

Link Tag

The link tag is used to link external files like CSS, bootstrap, font-awesome, etc.

Script Tag

Script Tag is mostly used to add the Javascript file or Javascript code.

Meta Tag

Meta Tag is used for defining HTML documents. It is not shown in the browser but is machine parsable.

Basic HTML Code

Let's start with the basic HTML Code. Write the following code in the body tag.

You will get the following result in the browser.

How to add an image source in 'img' tag?

If you have an image stored in the same directory as of your HTML file, then just write the name of the image with extension e.g 'image.JPG' in the 'src="image.JPG"'.

The above-mentioned code is very basic just to make a basic HTML page. It consists of 1 heading tag, 1 paragraph tag, and 1 image tag. It has no styling so it is not looking good. For styling HTML elements we use 'CSS'. Before jumping to Bootsrap lets get the basic idea of CSS.

What is CSS?

CSS (Cascading Style Sheet) is used to style HTML elements. For Example, if you want to change the font of a paragraph then you have to use CSS. There are 3 types of CSS but we only use inline CSS here. Ok, let's change the font-weight of heading to 'bolder'.

In-line CSS

Here you can see we have added 'style' attribute in the img tag. We have selected font-weight to bolder and text color red, lets see the result.

Here you can see the font of heading is bolder and its color changed to red. So, with CSS we can do any type of styling to any element. We can also use style attribute in head tag rather than use in the element and use the class to link that style attribute. Let's understand with an example.

Internal CSS

Here you can see

  1. I removed style attribute from the 'h1' tag and add class 'style'.
  2. Then I add 'style tag' in the head tag and add styling to the class '.style'.

Now you have to get the idea of how to use classes. Now we can move towards the Bootstrap.

What is Bootstrap?

Bootstrap is the CSS Framework. It features many HTML and CSS templates for UI interface elements. With bootstrap classes, you do not need to style the element by yourself. Bootstrap classes have built-in styling that makes your basic HTML element looks beautiful. As I have shown you previously how to add a class in the element and then add styling to that class. Bootstrap classes are the same just they are already styled. You just have to download 'bootsrtap.css' or 'bootstrap.min.css' and link these files in your head tag. After linking these files you are ready to use Bootstrap classes. There are hundreds of Bootstrap classes, you can easily find them on the internet.

Here you can see we linked the 'bootstrap.min.css' file in the head tag. You can download this file from here. You can also use CDN if you do not want to use it from the downloaded file and want to access it from their online server. There are a lot of Bootstrap classes. Here in this blog, we will discuss only 4 classes that will make your content in webpage responsive.

What is Responsive Website?

The responsive page is that which is mobile friendly. The responsive page looks good on small devices. There are many ways to make responsive pages, but the most convenient and easy way is through bootstrap classes.

Responsive Webpage using Bootstrap

We are going to discuss 4 classes of Bootstrap:

  1. Container
  2. Fluid Container
  3. row
  4. col-xx-xx

What is Bootstrap Container?

container is a class of Bootstrap whose max-width varies with screen size. For Extra-large screen greater than or equal to 1200px container width is 1140px. Similarly, for smaller screens, it changes accordingly. Let's see an example

Here we have added the class container in the div element. Now let's see its effect.

This black background is showing the width of the container.

What is Container-fluid

The Container-fluid takes 100% width at all breakpoints. It means it will take full width at any screen size. Let's see an example.

This Black background below shows the width of the container-fluid. It will remain 100% at all screen sizes. It has just a little margin on the left and right sides.

It is good practice to add your content inside the container or container-fluid. Make sure to add the class in the outermost 'div' element after 'body' tag. These containers also help in removing unnecessary horizontal scrolling of your page. If you do not add container then sometimes your content goes outside the max-width of the page and it results in unnecessary horizontal scrolling. Now, let's move towards my most favorite classes of Bootstrap "row and col".

Bootstrap Classes "row and col"

To make your webpage responsive these two classes are the perfect substitute for media queries. We can also make the webpage responsive using CSS media queries but it is lengthy and complicated. Also if we want to add contents in a row column-wise it will be a little difficult using CSS. But Bootstrap classes made it much easier.

How to use row and col?

First, let's understand both thses classes. First, we have to make a 'div' with the 'row' class. This row now has 12 equal-width columns as shown below.

Now with the help of 'col-xx-xx' class, you can divide the row in any number of columns with a total sum of columns equal to 12. For example like this:

You can add any content inside those columns either paragraph, images, video, or anything, let's take an example.

In this code, we have added three columns of equal length 'col-md-4'. We include the same content separately in each column.

As you can see that these three contents fit perfectly in this row. I have selected 3 equal columns: col-md-4. Now, let's understand the format of these columns.

  1. .col- : This is for any container width.
  2. .col-sm- : This is for small container width greater than or equal to 576px.
  3. .col-md- : This is for medium container width greater than or equal to 768px.
  4. .col-lg- : This is for large container width greater than or equal to 992px.
  5. .col-xl- : This is for extra large container width greater than or equal to 1200px.

The above three-column content shows on small devices like this.

Responsive Design

So it is responsive for mobile devices. So, with the help of 'row' and 'col' we can make mobile-friendly webpages. Without Bootstrap classes, it is very lengthy and complicated to implement the above example of three columns. So, if you want to start Web designing, I would prefer you to use these 4 classes abundantly in your code. It makes the code easy, short and the result will be mobile-friendly. I use these classes too much. I hope this article will be helpful to you. If you like this article follow us on social networks for appreciation.

Check out Best Power Strips