Custom and Responsive Grid Width at Bootstrap 4

Question

My code is below:

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  <style>
    .col-lg-3.custom {
      flex: 0 0 20%;
      max-width: 20%;
    }
    
    .col-lg-6.custom {
      flex: 0 0 55%;
      max-width: 55%;
    }
  </style>
</head>

<body>

  <div class="row">
    <div class="col-lg-3 custom" style="background: red;">1</div>
    <div class="col-lg-6 custom" style="background: rgb(0, 255, 255);">2</div>
    <div class="col-lg-3" style="background: green;">3</div>
  </div>

</body>

</html>

What I want here is making first column a bit smaller. col-lg-3 is too wide and col-lg-2 is too narrow for first column. For that reason I added custom styles. It works for wide screens actually.

But in mobile, it lose its responsiveness and becomes as below picture.

I want to make it as below at mobile:

Note: I found some questions for this problem, but I guess answers are for Bootstrap 3 because they didn't work for me.

score 1 · Accepted Answer · answered Feb 11 '21 at 06:50

Can you please check the below code? Hope it will work for you. If you want 100% width of all blocks on a mobile device you can apply the media query for the same.

Please refer to this link: https://jsfiddle.net/yudizsolutions/apf0hrn7/

 .col-md-3.custom {
   flex: 0 0 20%;
   max-width: 20%;
 }

 .col-md-6.custom {
   flex: 0 0 55%;
   max-width: 55%;
 }

 @media (max-width:767px) {
   .col-12.custom {
     max-width: 100%;
     flex: 0 0 100%;
   }
 }

<html>

  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  </head>

  <body>

    <div class="row">
      <div class="col-md-3 custom col-12" style="background: red;">1</div>
      <div class="col-md-6 custom col-12" style="background: rgb(0, 255, 255);">2</div>
      <div class="col-md-3" style="background: green;">3</div>
    </div>


  </body>

</html>

Anjs · Answer 2 · 2021-02-09T18:35:49.617

0

You are using bootstrap so you can use col-12 for mobile devices. You need to set col-xl col-lg col-md and col-sm also for this. Also, you have .custom class added to your divs. That is why your div are always taking the width added in that class in all screensize.

You can use your own media queries as well like below :

@media (min-width: 992px) {
  .col-lg-2half {
    -ms-flex: 0 0 20% !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
    }
  .col-lg-6half {
    -ms-flex: 0 0 55% !important;
    flex: 0 0 55% !important;
    max-width: 55% !important;
    }
}

edited Feb 09 '21 at 18:35

answered Feb 09 '21 at 17:52

Anjs

586
4
11

I try this but it doesn't work. class="col-lg-3 custom col-md-12 col-sm-12" – Yavuz Feb 09 '21 at 17:59
This is because you have added .custom class to your divs. Remove the CSS that you have added then it will work. – Anjs Feb 09 '21 at 18:01
So how can I make first column a bit narrower? – Yavuz Feb 09 '21 at 18:03
This is the fiddle link https://jsfiddle.net/6d35sew7/ – Anjs Feb 09 '21 at 18:03
Try col-lg-2 for first column – Anjs Feb 09 '21 at 18:04
The with of first column should be a bit wider than col-lg-2 and a bit narrower than col-lg-3. This is the problem. – Yavuz Feb 09 '21 at 18:06

Custom and Responsive Grid Width at Bootstrap 4

2 Answers2