Display 1 row of content on larger LG screens and 2 rows on medium-sized MD screens using Bootstrap

How can I achieve 1 row with 12 cells on a large screen in Bootstrap, and for a smaller screen have 2 rows with 6 cells?

Here is a visual representation of what I am trying to accomplish:

https://i.stack.imgur.com/NgfaP.png

This is the code I attempted:

<div class="col-xs-1 "><br/></div> 
<div class="col-lg-1 col-xs-2">
    <h1>1</h1>
</div>

... (code continues)

However, instead of the desired layout, I ended up with this:

https://i.stack.imgur.com/zrfvX.png

I'm puzzled by why these two cells are stacked:

<div class="col-xs-1 hidden-lg "><br/></div> 
<div class="col-xs-1 hidden-lg "><br/></div>

I cannot figure out the reason behind it.

Please refer to this Fiddle for a correct implementation: Fiddle OK

When some cells contain '0', everything works fine. However, if I try to remove '0' to create empty cells, it fails: Fiddle FAIL

csstwitter-bootstraptwitter-bootstrap-3

Answer №1

.row>div {border:1px solid #000;height:20px;}
@media (min-width:992px) and (max-width:1199px) {
.row>div:nth-child(6) {clear:left} /* to put the 6th block in new row */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row text-center">
 <div class="col-lg-1 col-md-2">1</div>
 <div class="col-lg-1 col-md-2">2</div>
 <div class="col-lg-1 col-md-2">3</div>
 <div class="col-lg-1 col-md-2">4</div>
 <div class="col-lg-1 col-md-2">5</div>
 <div class="col-lg-1 col-md-2">6</div>
 <div class="col-lg-1 col-md-2">7</div>
 <div class="col-lg-1 col-md-2">8</div>
 <div class="col-lg-1 col-md-2">9</div>
 <div class="col-lg-1 col-md-2">10</div>
    </div>
</div>

It may not be completely clear if I understood your question correctly, but based on my understanding, you just need to include this single line.

Answer №2

Just apply the classes col-lg-1 col-md-2.

To see a demonstration, visit this jsfiddle link. (don't forget to adjust the size of the result window)

Answer №3

RESOLUTION : I managed to fix the issue by including style="clear:both;" in my second blank cell.

You can view the solution here: http://example.com/solution

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

Creating a replica of Airbnb using Bootstrap 5: Transforming the search bar into a button

I am looking to implement a search bar button similar to the one on airbnb using bootstrap 5, like this example: https://i.sstatic.net/oIIzv.png Here is an example of HTML code that you can use: <button type="button" class="btn btn-ligh ...

htmlcsstwitter-bootstrapbootstrap-5

CSS media queries with precise inequality restrictions

Imagine the following scenario: @media only screen and (max-width: 600px) { nav { display: none; } } @media only screen and (min-width: 601px) { nav { display: block; } } This setup can lead to undefined behavior for a wid ...

htmlcssmedia-queries

What is the best way to remove horizontal scrolling and reduce element size on mobile devices?

My current project is utilizing the Material-ui framework, and I have a situation where numerous anchor elements are being displayed as a table within a Paper component from mui. However, due to the length of this table, it causes a horizontal scroll bar t ...

cssreactjsmaterial-designmaterial-ui

Different "criteria" for CSS wildcard selectors using Selenium

There are several CSS webelements on my page with ids in the format: cell_[number]-button_[number] I am attempting to target ALL of these elements by using Selenium to locate all elements that begin with cell and include button: var elements = Util.driver ...

javacssseleniumwildcard

How can I position four DIV elements to the right of each other inside a parent DIV?

I am attempting to align 4 divs next to each other within a parent div at specific positions. The proposed div structure is as follows (referred to as the maindiv): <div> <div>1</div> <div>2</div> <div>3< ...

css

Navigate to the end of a container

Is there a method to automatically scroll to the bottom of a div when the page is loaded? I have attempted several solutions without success. If you have any insights, please share them. Thank you! ...

javascriptjqueryhtmlcssscroll

Is there a way to implement word wrapping in li text without making any changes to its width

Is there a method to wrap the content inside li elements without modifying their width? As an illustration, consider the following structure - <ul> <li>Text Example</li> <li>Text Example</li> <li>Text Exampl ...

javascripthtmljquerycss

The arrow extends just a hair below the boundaries of the div, by approximately 1 pixel

I am facing an issue with my nav bar code. In Firefox and Chrome, everything works perfectly fine - there is a small arrow displayed below the links when hovered over. However, in Internet Explorer, the arrow appears slightly below the div, causing only pa ...

htmlcss

Optimizing Bootstrap 4 Flex-Row Dimensions

Issue: I'm currently working on a relatively intricate ListGroup using bootstrap v4. The .flex-row div is displaying some mysterious white space at the bottom, and I need assistance in eliminating it. Attempts Made So Far: I've experimented w ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Challenge encountered while attempting to implement grid system in ionic framework

I'm completely new to the world of ionic framework, and I really need some assistance in completing this view. Please see the image reference https://i.stack.imgur.com/WOBFw.png I have made an attempt at it with the following code: <div class ...

cssangularjstwitter-bootstrapionic-framework

Tips for aligning spin.js spinner in the center of a bootstrap 3 modal?

I'm attempting to showcase and center the spin.js spinner within a Bootstrap 3 modal. Despite successful implementation in IE and FF using the code below, I am encountering issues in Chrome, Safari Desktop, Chrome IOS, Safari IOS. The problem appears ...

htmltwitter-bootstrapmodal-dialogspinnertwitter-bootstrap-3

The issue I encountered with Angular's Mat-Select component is that the openedChange

When a user opens the mat-select, I am attempting to set CSS style using custom code. However, I am encountering an undefined error. Upon checking in the console, I noticed that the panel value is returning undefined. Can someone please advise me on how to ...

htmlcssangularangular-material

Updating JQuery function after window is resized

click here Currently, I am using slick-slider to showcase content in 3 columns by utilizing flexbox. The aim is to have the slider activated only on mobile view. This means that when the screen size shrinks down to mobile view, the 3 column flexbox transf ...

javascriptjqueryhtmlcss

Moving a popup div along with a marker in Leaflet can be achieved by using the set

After creating a map using leaflet and adding markers to different locations, I implemented code that displays a popup div with a message when a marker is clicked. Here is the code snippet: markers.on("click", function(d) { div.html("This is Some info ...

cssgoogle-mapsd3.jsleaflet

Merge adjacent CSS blocks seamlessly without the need for JavaScript

I am facing an issue with styling div elements that have editable content through a WYSIWYG inline editor on my website. Users often do not understand the importance of enclosing similar blocks of code in containing DIVs for proper formatting, resulting in ...

htmlcsscss-selectors

Is there a way to switch between different ag-grid themes using SCSS when loading them?

I have attempted to include the following code in my main.scss file: @import '~ag-grid-community/src/styles/ag-grid'; @import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham'; @import '~ag-grid-community/src/st ...

csssassag-grid

aligning adaptable grid on the screen

Is anybody able to assist me in vertically centering the responsive matrix below so that it is equidistant from the left and right edges of the screen (parent element has a width of 100%)? Any help would be greatly appreciated. Here is my code: <!DOC ...

css

Tips on utilizing media queries to optimize website layout for mobile devices

I'm currently working on a responsive website and utilizing media queries for that purpose. However, I've encountered an issue where the media queries don't seem to apply when the browser window is set to mobile view. Below is the snippet of ...

cssbootstrap-4media-queries

Opera fails to recognize background hover transitions on links

One of my web design projects includes a transition that creates a rounded background that fades in when links are hovered over. Unfortunately, the transition doesn't seem to work properly in Opera, even though it functions well in Firefox, Chrome, an ...

htmlcsscss-transitions

Disappear element after a brief moment

What is the best way to temporarily hide an element and then have it reappear after a second? var targetElement = document.getElementById("myElement"); targetElement.onclick = function() { this.style.display = "none"; setTimeout(function(){ ...

javascripthtmlcss