What is the best way to ensure that a multitude of div boxes are responsive in bootstrap 4?

I created this HTML and CSS code snippet:

<div class="">
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop2}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop3}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop4}" class="data-box"> some data </div>
      
    ... more divs ...
    
   </div>

The above code displays a set of div boxes with certain properties. Here is the corresponding CSS:

.data-box {
   width: 150px;
   background-color: yellow;
   margin-top: 0;
   margin-bottom: 5px;
   margin-left: 0; 
   margin-right: 5px;
   border: 1px solid red;
}

Depending on incoming data values, different numbers of divs will be generated. I want to arrange these div boxes based on screen size - 5 divs for desktop, 3 for ipad, 2 for phone, and 1 for very low resolution phones. How can I achieve this layout using Bootstrap 4?

csstwitter-bootstrapbootstrap-4

Answer №1

To customize the width of the data-box, you can add the class "row wrap" to the parent element. Then, in your media queries, you can set the width of the data-box as needed.

  .data-box {
   width: 20%;
   background-color: yellow;
   margin-top: 0;
   margin-bottom: 5px;
   margin-left: 0; 
   margin-right: 5px;
   border: 1px solid red;
   }
   
   @media all and (max-width:1023){
    .data-box {width:33.33%}
   } 
@media all and (max-width:600){
    .data-box {width:50%}
   }
@media all and (max-width:420){
    .data-box {width:100%}
   }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>
<div class="row wrap mx-auto">
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop2}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop3}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box">> some data </div>;
      <div data-th-if="${foo.prop1}" class="data-box">> some data </div>;
      <div data-th-if="${foo.prop1}" class="data-box">> some data </div>;
      <div data-th-if="${foo.prop1}" class="data-box">> some data </div>;
      <div data-th-if="${foo.prop1}" class="data-box">> some data </div>;
      <div data-th-if="${foo.prop1}" class="data-box">> some data </div>;
   </div>

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

What is causing the button to prevent file selection?

What's causing the button to not allow file selection when clicked on? Interestingly, placing a span or div in the label enables file selection upon clicking them, but not with the button. <html> <body> <label> <input t ...

css

What are some recommended techniques for utilizing Anchors within HTML?

As someone new to web development, I'm curious about the best practices for using anchors in HTML design. Right now, I am creating a list where users can click on list items (li) and then perform a specific action using jQuery. Additionally, I have so ...

jqueryhtmlcss

instructions on how to display a button on an HTML page using a controller response

Within my Laravel application, I have set up certain rules that are being returned by the controller. Here is the code snippet: $is_order_exist = Order::where([ 'customer_id' => $customer_id, 'is_confirmed_admin&a ...

phpajaxlaravelmodel-view-controllerbootstrap-4

JavaScript Drag-and-Drop Statement Issues

Currently working on a JavaScript game that utilizes the drag and drop feature of HTML. The goal is to make randomly generated fruit images draggable and droppable onto a jelly image. When the dragged image matches a certain condition (e.g., when the numbe ...

javascripthtmlcssdrag-and-dropgame-development

Loop through the elements of a class in JavaScript and choose all except for the one that was

Imagine having 5 div elements, each with a similar onclick-function that hides the other divs when clicked. HTML: <div id="1" class="divs" onclick="hide()"></div> <div id="2" class="divs" onclick="hide()"></div> <div id="3" cla ...

javascripthtmlcss

Interact with the cells in the table by clicking on them and managing class modifications for

Table structure: <table class="ui celled table unstackable" id="tblHits"> <thead> <tr> <th>40</th> <th>40</th> <th>40</th> ...

javascriptjqueryhtmlcss

The use of Bootstrap carousel indicators effectively controls event propagation

One way to achieve the desired effect is by implementing a solution like the one provided in this example from Bootstrap. When interacting with the indicators quickly, the animations can stack on top of each other, resulting in a strange chain of events. ...

javascriptbootstrap-4jquery-eventsevent-bubbling

Having difficulty aligning the SVG in the navbar component

Struggling with centering the SVG icon in a sideways navbar using React.js. Despite trying various solutions and researching similar issues, I can't seem to make it work. Any insights on why this is happening? Apologies if the solution is straightforw ...

cssreactjsbootstrap-4

Changing background colors of dropdown items in VueJs

Currently grappling with understanding the intricacies of styling in web development (specifically VueJS). I am facing some challenges: I am dynamically rendering colored dropdowns filled with dropdown items. I am struggling to figure out how to change t ...

htmlcssvue.js

What is the best way to connect individual buttons to a dynamic div that displays different content depending on the button clicked?

Hey there! I'm diving into the world of JavaScript and HTML, and I need some guidance on creating a menu that can toggle visibility of specific content in div(s) depending on which button (picture1-12) is clicked. My idea is to have one div that can d ...

javascripthtmlcss

JavaScript code does not seem to be functioning properly on my computer, but it works perfectly fine on

While the code functions perfectly in JSFiddle, it seems to fail when I try to implement it in an HTML file. Despite my efforts, I am unable to pinpoint the source of the issue. If you'd like to view the working version, here is the Fiddle demo. Bel ...

javascriptjqueryhtmlcss

The alignment of Bootstrap input fields is off center

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' ); <div class="row"> <div class="col-xs-12 text-center btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

The image is displaying correctly using the img tag, however, the v-bind method is

<div class="row"> <div :key="map.name" v-for="map in match.maps" class="col-lg-4 mt-5"> <img width="100" height="50" src="../assets/ovp.png"> <img v-bind:src="'../assets/&apo ...

htmlcssimagevue.js

What is the best way to showcase a list of divs in three columns rows using a forEach loop?

I need help troubleshooting my code. I'm trying to display an array called posts:[], which consists of a JSON object. Everything seems to be working fine except for the fact that I can't get three columns to display in a row using Bootstrap. I ha ...

vue.jsbootstrap-4

Error encountered when trying to apply Internet Explorer CSS to local files without a server

I am currently working on an application that generates an HTML report. The issue I am facing is that when the application outputs the js and css files separately, Internet Explorer 8-10+ refuses to load the CSS files because of a "CSS was ignored due to M ...

cssinternet-explorerweb

The Syntax of 2D Transformations

I am currently attempting to apply multiple animations on a single element simultaneously. While I have successfully managed to use the translate property to adjust the element's coordinates, I am encountering difficulties in expanding its height and ...

htmlcss

Maintaining the style of `li` elements within a `ul` list while ensuring they all

Struggling to create a menu list item with 4 items that won't fit on one line? Nested divs didn't work when adding padding. Here is my latest HTML and CSS: HTML: <div id="header"> <ul id="menu"> <li><a href="#"& ...

htmlcss

Premature adjustment of images to window size changes

How can I make the images inside a divider move down when the right-end of the browser reaches them? Currently, they start moving down before the edge of the window is reached. Any suggestions on how to fix this? JSFIDDLE: https://jsfiddle.net/prtdaay1/2/ ...

javascriptjqueryhtmlcss

JS causes the navigator to malfunction

UPDATE: Greetings! I have developed a navigation bar that loads various pages into a specific div. Here is the source code for the navigation bar: <div id="navBar"> <ul> <li><a href="#" onClick="document.getElementById('bott ...

javascripthtmlmysqlcss

Issue encountered while generating dynamic bootstrap toggle button

Looking to make my Bootstrap toggle buttons dynamic instead of static by loading them at runtime. Here is the HTML code I've been using: <a> Test-Title <input checked data-onstyle="success" data-toggle="toggle" id= ...

javascriptbootstrap-4