Converting Bootstrap rows into columns based on viewport size

My current layout displays like this on devices with large and small screens:

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

I'm looking to have the same divs arranged as rows on large screens and columns on small screens. Is there a way to achieve this without duplicating the div structure? The approach I've considered involves using classes like:

.box-a.row.visible-lg.hidden-sm
.box-b.row.visible-lg.hidden-sm
.box-c.row.visible-lg.hidden-sm

.box-a.col-sm-4.visible-sm.hidden-lg
.box-b.col-sm-4.visible-sm.hidden-lg
.box-c.col-sm-4.visible-sm.hidden-lg

However, as mentioned, this method leads to repetitive code. Are there cleaner ways to accomplish this while following the DRY principle?

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

If you place all columns within a .row in Bootstrap grid, each column can have both col-sm-4 and col-lg-12 classes due to the composable nature of the grid.

The grid structure is as follows:

  1. Namespace: col
  2. Screen Size: xs|sm|md|lg
  3. Column Span: 1-12

This allows for various combinations such as:

  • When the screen is LG (and up), the colspan is 12: col-lg-12
  • When the screen is SM (and up), the colspan is 4: col-sm-4

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";


.box {
  height: 50px;
  background: lightcoral;
  border: 1px solid green;
  margin: 5px 0;
}
<section class="container">
  <div class="row">
    
    
    <div class="col-sm-4 col-lg-12">
      <div class="box"></div>
    </div>
    
    <div class="col-sm-4 col-lg-12">
      <div class="box"></div>
    </div>
    
    <div class="col-sm-4 col-lg-12">
      <div class="box"></div>
    </div>

  </div>
</section>

PS: In Bootstrap, if a DIV has the class visible-lg, it will only be displayed at LG sizes, so adding a hidden-sm class is not necessary: .box-a.row.visible-lg.hidden-sm becomes .box-a.row.visible-lg.

Answer №2

Most front-end frameworks such as Bootstrap rely on a grid system to organize and position content effectively. The grid columns are designed to adjust based on screen size, showing multiple columns in a row on large screens and fewer columns on smaller screens like tablets or mobile devices. It seems like you are looking to do the opposite.

If you need to implement this reverse approach, I recommend creating a custom class for your columns instead of using the default col-x-x classes which could impact the overall layout. By utilizing @media queries, you can control the width of the columns for different device screens accordingly.

Answer №3

To efficiently achieve this, consider making your small columns occupy the full width once they reach a specific breakpoint using media queries. Simply assign a class called "full-width" to each column and include a media query in your CSS like so:

@media (min-width:720px) {
    .full-width {
        width:100%;
        left:0;
    }
}

By doing this, you can customize when the columns should expand based on screen size by adjusting the min-width breakpoint accordingly. Check out this fiddle to see it in action.

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

Applying a class change in Vue.js upon mounting

How can I make a button element with a .hover property trigger the hover animation as soon as the page loads? I want to apply a class to the button when the page is mounted and then remove it later. What is the best approach for this? I considered using a ...

javascripthtmlcssvue.jsvuejs2

Display the final submenu of the Asp.net menu on the right side

The asp.net menu on my website is functioning properly with one exception: the last submenu does not change direction from left to right, and its content is getting cut off at the edges of the screen. This issue is particularly noticeable in the Master pa ...

htmlcssasp.netmenu

The icon on my page is not displaying, and the responsive menu is also not appearing

After tweaking the @media {} settings, I noticed that the icon displays properly when reduced, but disappears completely when fully covered with {}. Additionally, my responsive menu is not visible as expected. `@import url('https://fonts.googleap ...

javascripthtmlcssmedia-queriesfont-awesome

Adjusting the size of the text input without changing the padding

How can I increase the font size to 1rem without changing the height of an input text field that has a padding of 1rem? The goal is to maintain the same height for the input field. Any ideas on how to achieve this? This is my current HTML structure: < ...

htmlcss

"Utilizing Bootstrap to add borders to div elements is a

https://i.sstatic.net/yPt46.png Hey there! I am working on a project using bootstrap 4. I encountered an issue that I can't seem to solve. I placed an image inside a div, set the div's height and width to 200px with overflow hidden. The image w ...

htmlcssbootstrap-4

Seamless blend of images with a stunning mosaic transition effect

I attempted to create a mosaic effect on my carousel similar to this example: , but not exactly like this. I want to include control buttons for next and previous, and have images in HTML tag. However, my attempt is not working and I need help. This is ...

jqueryhtmlcss

Mouse over the background of an image in jQuery to create a fade-in effect, without affecting any content inside

Currently facing a challenge with jquery. Please take a look at jsfiddle.net/7HXEF/1/. I am trying to create a DIV with a background image that fades in and out when the mouse hovers over it. However, the inner div with a link should not be affected by the ...

jqueryhtmlbackgroundfadeinfadeout

Button located beneath or above each individual image within the *ngFor loop

With the *ngFor loop, I am able to populate images but now I want to include a button below or on each image. Unfortunately, my CSS knowledge is limited. Below is the code I have: HTML Code <div class="container"> <div ...

cssangular

The Web Browser is organizing CSS elements in an alphabetized sequence

map.css({ 'zoom': zoom, 'left': map.width()/(2*zoom) - (point[0]/100)*map.width(), 'top': map.height()/(2*zoom) - (point[1]/100)*map.height() Upon observation, it appears that Chrome adjusts the map zoom first be ...

javascriptjqueryhtmlcssinternet-explorer

Combining Images Together in JavaScript

In my current javascript project, I've encountered an issue. Specifically, I'm trying to overlay one image on top of another image using the following code: <div> <img src="1.jpg" style="z-index:1;"/> <img src="2.png" style="z ...

htmlcssimage

Maximizing Efficiency: Top Techniques for Emphasizing Grid Rows with jQuery

Currently, I am facing an issue with the jQuery code I am using to highlight the selected row in my grid. It seems to be taking longer than anticipated to select the row. Does anyone have suggestions on how I can optimize this code for better performance? ...

javascriptjqueryhtmlgridview

CSS Float behaving unexpectedly

body { margin: 0; font-family: arial; line-height: 16px; } #topbar { background-color: #600c0c; width: 100%; height: 46px; color: white; margin: 0; } .fixedwidth { width: 1050px; margin: 0 auto; } #logodiv { padding-t ...

htmlcsscss-float

Adaptive Positioned Image Display

I currently have a Section with four blocks of content. Along the right-hand side of the screen, there are some images (as shown in this example) that I want to position absolutely. However, I am encountering an issue where these images overlap with the te ...

htmlcss

"Looking for a way to eliminate the background of an image on NextJS? Learn

https://i.stack.imgur.com/zAsrJ.png When this image is incorporated into a Nextjs rendering, it unexpectedly includes additional content. <div className="flex flex-col items-start justify-start rounded-3xl p-4 bg-boxi w-1/3"> <div cla ...

javascriptcssreactjsnext.jstailwind-css

Creating a compilation of HTML file links using Gulp

Is there a way to utilize Gulp in order to compile a single HTML file containing links to all pages within a specific directory? For instance, if I have two files contact.html titled "Contacts" and faq.html titled "Frequently asked questions" located in t ...

htmlnpmgulp

Refreshing PHP Script

I have a PHP file that contains a combination of HTML elements, JavaScript functions, and PHP scripts. I need to rerun a specific part of the PHP script repeatedly. Let's consider the following example: <html> <?php $connection = ...

phpjavascripthtml

Unusual phenomenon of overflow and floating point behavior

HTML and CSS Output Example: <div id="float_left"> DIV1 </div> <div id="without_overflow"> DIV2 </div> CSS Styling: #float_left{ float: left; width:200px; background-color: red; } #wit ...

csscss-float

Steps to establish the starting value as 'Concealed'

I stumbled upon this interesting example that demonstrates how to create expandable/collapsible text when clicked. My question is, how can I initially set the value to be hidden so that the paragraph starts off collapsed and expands only when clicked? He ...

javascripthtmlcss

Drop down list not showing array values

I am attempting to populate a dropdown list with elements from an array using the Document Object Model (DOM) within a for loop. However, I keep encountering an error stating that the dropdown list is null. Here is the JavaScript code I am using: var st ...

javascripthtmlarraysdom

What is the best way to change the status of a disabled bootstrap toggle switch?

I'm working with a read-only bootstrap toggle that is meant to show the current state of a system (either enabled or disabled). The goal is for it to update every time the getCall() function is called. However, even though the console logs the correct ...

javascriptjqueryajaxtwitter-bootstrapbootstrap-4