How to make a responsive website with HTML, CSS, and bootstrap?

About responsive design

A responsive website is a technology for how to display our website according to devices. The website design should look good at any size like a large desktop LCD monitor to the smaller screens. we also use on smartphones and tablets. Responsive design ensures visitors to the website have a similar experience that is independent of the size of the device used to view the website. Responsive website design to make a website accessible and look good across multiple browsers, devices.

Responsive design is an approach to designing websites that are responsive and user-friendly. This means that the browser should be able to use its own browser or mobile device instead of using other browsers. HTML is the most common browser used by web developers to create websites and applications that are responsive. HTML is a language used to make websites more readable and understandable by users.

The first part of responsive design is CSS3 media queries, which currently experience enough help across some modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to collect information about the site visitor and use it to conditionally apply CSS styles. In CSS3, we can use max and min queries to help make responsive websites according to devices.

The third part of the article will be a little more technical, but I think it's worth reading to get an idea of what responsive design is all about. We'll start with the basics: HTML, CSS and JavaScript are two of our most popular languages. They're used by web developers to create websites, apps and other websites. These are the basic elements of any website, including your browser or app store interface.

Javascript allows you to write code that runs on top of the browser. This means that if you want to use JavaScript in your website, it should be able and fast to do so. When you first learn how to program, it can be very intimidating for a beginner to understand what it takes to build a website.

About media query in CSS

 

You can use media queries CSS to resolve the device represent of website display. CSS @media this the code of media query. This code (CSS @media) implement in our CSS.

Code:-

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This <meta> tag inserts into the top of the head section. Because of name="viewport" this element instructions to the browser how to display web page in device. The viewport change with the device, and will be smaller on a mobile device and computer screen.

This attribute (width=device-width) part of the width of the page to screen-width of the device.

The initial-scale=1.0 initial zoom level first time web page loaded by the browser.

This code implement in min-width means minimum width 480px.

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

This code implement in max-width means that maximum width 600px.

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

orientation feature

portrait
Portrait orientation is the height is greater than or equal to the width into the viewport.

landscape
Landscape orientation is the width is greater than the height into the viewport.

@media only screen and (orientation: portrait) {
  body {
    background-color: lightblue;
  }
}

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

 

You can use both in one media query line (max-width: ..) and (min-width: ..) with a minimum width and a maximum width.

For example:-

@media screen and (max-width: 850px) and (min-width: 550px) {
  div {
    background: yellow;
  }
}

You can also use and implement AND OR and COMMA separate in a single line media query.

/* If width is between 500px and 800px OR above 1000px */
@media screen and (max-width: 850px) and (min-width: 550px), (min-width: 1100px) {
  div {
    background: yellow;
  }
}

/* For iPad screening */

@media only screen and (min-width: 480px) and (max-width: 1000px) and (orientation:portrait) {

    /* For portrait layouts only */
}

@media only screen and (min-width: 480px) and (max-width: 1000px) and (orientation:landscape) {
    /* For landscape layouts only */
}

Extra small devices
@media only screen and (max-width: 600px) {...}

Small devices (portrait tablets and large phones, 650px and up)
@media only screen and (min-width: 650px) {...}

Medium devices (landscape tablets, 768px and up)
@media only screen and (min-width: 768px) {...}

Large devices (laptops/desktops, 1100px and up)
@media only screen and (min-width: 1100px) {...}

Extra large devices (large laptops and desktops, 1250px and up)
@media only screen and (min-width: 1250px) {...}

 

About media query in Javascript

It’s possible to use JavaScript with this function (window.matchMedia).

var mq = window.matchMedia( "(min-width: 500px)" );

Matches property returns true or false depends on the query results.

For example:-

First way

if (mq.matches) {
  // window width is at least 500px
} else {
  // window width is less than 500px
}

Second Way

// media query event handler
if (matchMedia) {
  var mq = window.matchMedia("(min-width: 500px)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}

Third way

// media query with function
function WidthChange(mq) {
  if (mq.matches) {
    // window width is at least 500px
  } else {
    // window width is less than 500px
  }
}

Another way to define a media query

var mq = window.matchMedia('@media all and (max-width: 600px)');
if(mq.matches) {
    // the width of browser is more then 600px
} else {
    // the width of browser is less then 600px
}

 

About media query in Jquery

In Jquery same as Javascript in real-world so many different devices now it's very important for your design to fit on different screen sizes. This is one of the ways of changing your display depending on screen size. Media queries to find out the viewport of the screen and allowing to change the design depending on your screen size.

($(window).width() >= 1100) means less than equal to 1100px

$(window).resize(function(){
    if ($(window).width() <= 1100){    
        // do something here
    }    
});

And ($(window).width() >= 1100) means greater than equal to 1100px

$(window).resize(function(){
    if ($(window).width() >= 1100){    
        // do something here
    }    
});

($(window).width() >= 600 && $(window).width() <= 1100) means both condition are true other wise else condition run

$(window).resize(function(){
    if ($(window).width() >= 600 && $(window).width() <= 1100){    
        // do something here
    }    
});

 

About media query in Bootstrap

Containers are a basic layout for an element in Bootstrap and using our default grid system. and Containers fluid take 100% width of every device like large Desktop, Desktop, Tablet, mobile. Container layouts do not require to the nested container. Use .container-fluid for a full width. According to device four class to display the responsive website. First "lg" class for the large device, "md" for the medium device, "sm" for a small device, and "xm" for an extra small device.

<div class="container-fluid">
  ...
</div>

Bootstrap defines in the twelve column system. And first add CDN path in your head section then define according to devices define code below:-

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor</p>
    </div>
  </div>
</div>
</body>
</html>

 

If you want more information about griding:- https://getbootstrap.com/docs/4.0/layout/grid/

AMP technology

Google has combined website optimization techniques to increase the loading speed of mobile web pages. But developers can integrate AMP technology in web pages through HTML5, CSS3 and JavaScript.

Tweet