How to make responsive layout on bootstrap 4

Question

Currently the web page looks like this: i trying to make the page in the row 2 at grid of image inside row and the result is reverse

Now on resize to mobile screen flex column the container: i was trying to fix on overflow

html :

 <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Bootstrap 4 Responsive Layout Example</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="col-md-12 col-lg-4 col-xl-5"> <h2>PROTECT YOUR BUSINESS WITH OUR NHS ASSURED FACE VISOR</h2> <p>Designed with care and comfort in mind</br> Our innovative face visor is designed with care, comfort and personalisation in mind. Developed specifically to help during covid-19 you can be assured of a product that meets NHS standards, that will protect your business, your staff and you.</p> <p><a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a> <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p> </div> <div class="col-md-6 col-lg-4 col-xl-3"> <img src="img/3-layers.png"> </div> </div> <div class="row my-5"> <div class="col-md-12 col-lg-4 col-xl-5"> <h2>OUR UNIQUE RAMFOAM CARE PROCESS IS AS SAFE AS OUR VISOR</h2> <p>We can fully brand your face visor to your company colours and deliver hundreds of thousands of visors to you safely and securely. Our process is as safe as our visor. We've created a unique comfortable, adjustable and re-usable PPE item that features a medically approved, hypo- allergenic foam headpiece with a fully replaceable anti-fog visor system which is delivered in two pieces for easy storage and self-assembly.</p> </div> </div> <div class="row mb-5"> <div class="col-md-6 col-lg-4 col-xl-5"> <h2>PROTECT YOUR BUSINESS WITH THE BEST IN THE BUSINESS</h2> <p>Receive your visors within five working days Our innovative face visor is designed with care, comfort and personalisation in mind. Developed specifically to help during covid-19 you can be assured of a product that meets NHS standards, that will protect your business, your staff and you. </p> <p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a> <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p> </div> <div class="col-md-6 col-lg-4 col-xl-5"> <div class="card bg-default"> <div class="card-body"> <h4 class="text-center text-uppercase my-3">contact sales</h4> <p class="text-center mb-4">Please drop us email through the form below and we'll be in touch withing 24 hours.</p> <form role="form"> <div class="form-group"> <input class="form-control" placeholder="NAME" type="text"> </div> <div class="form-group"> <input class="form-control" placeholder="EMAIL" type="email"> </div> <div class="form-group"> <input class="form-control" placeholder="PHONE" type="number"> </div> <div class="form-group"> <textarea class="form-control textarea-custom" rows="3" placeholder="MESSAGE"></textarea> </div> <div class="form-group"> <button class="btn btn-light text-right text-uppercase" type="button">submit</button> </div> </form> </div> </div> </div> </div> </body> </html>

i was trying to override the bootstrap template in the result after save the coding and i get overflow (not responsive)

Answer 1

Try this one. It's the most basic form.

<html>
...
<body>
     <div class="container">
          <div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">...</div>
          </div>
          <div class="row">
              <div class="col-md-4 col-sm-4 col-xs-4">...</div>
              <div class="col-md-4 col-sm-4 col-xs-4">...</div>
              <div class="col-md-4 col-sm-4 col-xs-4">...</div>
          </div>
     <div>
</body>
</html>

Also I think you might find it helpful to look at the difference between container and container-fluid in Bootstrap and the definition of row and col . That is so simply concept.

How to make responsive layout on bootstrap 4

Question

1 answers

solution1
0 2020-09-13 02:21:48

How to make responsive layout on bootstrap 4

Question

1 answers

solution1 0 2020-09-13 02:21:48

solution1
0 2020-09-13 02:21:48