Creating a Personalized and Adaptable Grid Layout in Bootstrap 4

Here is the code snippet I'm working with:

<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>

I've added custom styles to make the first column a bit smaller because 'col-lg-3' is too wide and 'col-lg-2' is too narrow for my needs. These custom styles work well on larger screens.

https://i.sstatic.net/zkk0G.png

However, when viewed on mobile, the responsiveness is lost and it looks like the image below:

https://i.sstatic.net/SqXNj.png

I would like it to appear as shown in this image on mobile:

https://i.sstatic.net/49suu.png

Please note that I have seen some solutions for similar issues, but they seem to be referring to Bootstrap 3 and haven't worked for me. Any help would be appreciated.

htmlcssbootstrap-4bootstrap-grid

Answer №1

Could you please review the code snippet below? It should help achieve 100% width for all blocks on mobile devices by using a media query.

You can find the code sample at 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>

Answer №2

If you are using bootstrap, make sure to utilize col-12 for mobile devices. It is important to also set the col-xl, col-lg, col-md, and col-sm classes accordingly. Additionally, if you have a .custom class added to your divs, they will maintain the width specified in that class across all screen sizes.

You can create custom media queries like the following example:

@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;
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Including emoticons in text without impacting the 'line-height'

Is there a way to add an emoticon within a paragraph without altering the line-height, regardless of the size of the emoticon? For example: I've tried using position: absolute or vertical-align: text-top, but neither seems to work. p img { hei ...

cssemoji

Animating scrollTop using JQuery

There are two buttons with hidden parts related to each. When a button is clicked, its associated part will be displayed and the document will scroll to the top. Issue: The displayed part does not move to the top as intended. Your assistance in resolving ...

jqueryhtml

Adjusting the bootstrap class styles

I'm brand new to Bootstrap and currently in the process of learning how to use it. I have a question regarding the customization of Bootstrap classes. Specifically, I would like to modify the border size and color of certain classes. In order to ac ...

htmlcsstwitter-bootstrapbootstrap-4

Is the navigation taking priority over all other content and adapting responsively alongside it?

My current project involves a responsive navigation, which is functioning properly. However, I am facing an issue with the content not aligning correctly under the navigation bar. I am struggling to find a solution to this problem. If you would like to rev ...

javascripthtmlcss

Can you assist in resolving this logical problem?

exampleDEMO The code above the link demonstrates how to control input forms based on a button group selection. In this scenario, when a value is inputted on the 'First' Button's side, all input forms with the same name as the button group ...

javascripthtmlangularjs

I'm currently facing an AttributeError issue, and I'm seeking solutions to resolve it

Currently, I am in the process of developing an eCommerce platform using Django. However, I have encountered an issue when attempting to manipulate the quantity of each product in the cart. The error message displayed is as follows: AttributeError at /orde ...

htmldjango

Error: Website unable to load on Internet Explorer 6

When trying to load a specific page in IE6, I encounter an issue where a popup message appears stating 'This page contains both secure and nonsecure items. Do you want to display the nonsecure items?' Regardless of my choice, I receive an HTTP 40 ...

htmlinternet-explorer-6

An error message stating 'instructions.addEventListener is not a function' appears when using PointerLockControls in three.js

I've been trying to implement PointerLockControls into my project using the example from the THREEJS examples page. I copied the code exactly as it is, but I keep getting errors in the console and the program won't run. My project structure is pr ...

javascripthtmlthree.jses6-modules

The PHP code fails to run and instead displays as raw PHP code on the webpage

As someone new to web development, I am diving into the world of PHP for the first time. So please excuse my ignorance as I navigate through this process. The task at hand involves creating a website with an HTML form that sends emails. After doing some r ...

phphtmlformsemailweb

Setting up a functionality for a PHP-generated select option

When the main select tag "category" is changed, it triggers a PHP script to display a new select tag: <select id="category" onchange="showme(this);"> <option value="txt">text</option> <option value="img">image</ ...

javascriptphphtmlajax

Change the size of the image to use as a background

I have an image that is 2000x2000 pixels in size. I originally believed that more pixels equated to better quality with less loss. Now, I am looking to display it on my browser at a resolution of 500x500. To achieve this, I attempted to set the image as t ...

jqueryhtmlcssimage

jQuery Toggle and Change Image Src Attribute Issue

After researching and modifying a show/hide jQuery code I discovered, everything is functioning correctly except for the HTML img attribute not being replaced when clicked on. The jQuery code I am using: <script> $(document).ready(function() { ...

javascriptjqueryhtmlcss

Tips on aligning a v-btn alongside v-expansion-panels on the same row

Struggling with aligning my layout. Trying to get a single set of v-expansion-panels and a v-btn in the same row, both visually centered within a card. I managed to almost achieve it in this codepen: https://codepen.io/anzuj/pen/PoPPbdw with the following ...

cssvue.jsvuetify.js

Having difficulty retrieving the Area and Range information in ChartJS

I am new to working with HTML5 and ChartJS. I have noticed two different types of declarations when attaching JS Chart Versions 1.0.1 and 2.1.1. Can you please provide some insight into this? Additionally, I am facing an issue where the stripes behind the ...

javascripthtml

Chrome page loading with smooth color transitions

Setting global colors on links and transitions on their color: a { color: blue; transition: color 300ms linear; } Later in the code, there's more specific styling for links in the navigation: nav a { color: red; } nav a:hover { color: black; } ...

cssgoogle-chrometransition

I am looking to incorporate an image into a particular section of the html code once the screen size is adjusted to mobile view using a media query

How can I use media queries to add an image as a background to the section with the id= "vid" while hiding the background video that is currently playing on it? Here is my current HTML code: <section id="vid" class="vidd"> <video playsinline aut ...

csshtmlmedia-queries

Tips on aligning objects within div elements

I am currently in the process of learning how to create websites. Below is the body tag of my website: <body> <h1 id="title">Title</h1> <div id="loginContainer"> <img id="usernameIcon" src="assets/images/usern ...

htmlcsspositioncss-position

Automatically resizing font to fit the space available

I am attempting to achieve the task described in the title. I have learned that font-size can be set as a percentage. Naturally, I assumed that setting font-size: 100%; would work, but unfortunately it did not. For reference, here is an example: http://js ...

javascripthtmlcssfontsfont-size

Is it possible to create a website with a single session for all users using JavaScript

Greetings everyone, I am excited to be posting for the first time on stackoverflow. After dedicating a week to learning javascript and achieving some things I am proud of, I have hit a roadblock. As a self-learner, I kindly ask for your understanding. Cur ...

javascripthtml

I'm having trouble with getting my Bootstrap CSS and JS links to function properly

The paths for the Bootstrap CSS and JS files have been included in the code, but unfortunately, they are not working. Instead, I am getting the following errors in the console: GET http://127.0.0.1:5000/[https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist ...

javascripthtmlcssflaskbootstrap-5