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

Can you explain the significance of the "style.css?ver=1" tag?

Recently, I noticed that certain websites incorporate a CSS tag such as style.css?ver=1. Can you explain the significance of this? What exactly is the purpose of adding ?ver=1 to the CSS tag? Could you provide instructions on how to implement this in cod ...

cssversion

Blurry black-and-white picture

As a beginner in HTML and CSS, I am still learning. I have a challenge where I have two images and when one of them is hovered over, it should increase in size and display text. Additionally, I want the image that is not in focus to appear in grayscale. Wh ...

htmlcss

Guide on darkening the surrounding div of an alert to give it a modal-like effect

I want to display an alert to the user in a visually appealing way. To achieve this, I am utilizing Bootstrap's alert class. Here is how I am showing the user a div: <div class="alert alert-warning alert-dismissible" role="alert"> Some text ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the process for defining an outcome when a draggable element is placed into a droppable area using Jquery?

Currently, I am working on a task where I need to increase the value of a counter (var counter = 0;) every time a draggable image is dropped into a dropzone, which is also an image rather than a div. $( "#goldbag" ).draggable({ revert: "invalid", containm ...

javascriptjqueryhtmlcssjquery-ui

Use CSS bracket attribute to conceal link with no HTML access

I am unable to modify the HTML code, but I need to find a way to hide the link (#wall). <td class="status_value"><span class="online"> - <a href="#wall"> Leave a Comment </a> <a href="#today"> ...

htmlcss

Currently seeking assistance in replacing an existing Wordpress object with a new one

I'm looking to swap out the current slider image with a new slider. Whenever I try to replace it with the TOP 5 Games, they disappear or don't show up at all. <?php if( function_exists('cyclone_slider') ) cyclone_slider('24&ap ...

phpjqueryhtmlcsswordpress

Spin a sphere within a semicircle using html and css

I have been working on a project to animate a ball inside a crescent shape using HTML and CSS. You can check out my codepen here. However, I am facing an issue where the ball is currently stuck at the top of the crescent. I would greatly appreciate any as ...

htmlcssanimation

Deactivate click events in the container div

Here is the html code snippet that I am working with: <div class="parent" ng-click="ParentClick()"> . . . <div class="child" ng-click="ChildClick()"> Some Text </div> </div> When clicking on Som ...

javascripthtmlcssangularjs

How to apply an icon image using the background property in CSS in Vue 3

Need help setting background image from the public folder |_public | |_images | |_icon.png |_src |_components |_TheHeader.vue I'm having difficulty trying to set an image as a background in TheHeader.vue using CSS, but the image is located in ...

cssvue.jsvuejs3

Turn off base64 encoding for background URLs in the Minify package

When I use the minify tool to compress my js and css files, I noticed that the files containing background:url(...) statements actually increased in size. This happened because the urls were encoded to base64. I tried to disable this base64 encoding featu ...

cssnpmbase64node-modulesminify

Elevate with Ease: Tailwind's Height Transition

I've been attempting to implement a transition effect using TailwindCSS, but I haven't found an updated version with the latest features. Here's the code snippet: <div id="fadeInElement" className={visible ? " w-2/3 px-5 t ...

javascriptcssreactjsjsxtailwind-css

Utilizing PHP variables and CSS to dynamically adjust the background color according to various events triggered by SQL data

Hopefully my explanation is clear. <?php $rx_event_color = $rx_image_color = '#FF0000'; if ($a['rx_event_exists'] == 1) { $rx_event_color = '#00FF00'; } if ($a['rx_scanned'] == 1) { $rx_image_color = '#00FF ...

phphtmlsqlcss

Retrieving text content within a span element using CSS

Here is the Jsfiddle that I experimented with http://jsfiddle.net/LpH8B/2/ <span>*</span> <br> <span>*</span> <br> <span>hdhdf</span> span[text='*'] { color:red; } I am looking to target ...

csshtml

Adjust the placement of the fixed header waypoint or change its offset

Currently working on developing a Wordpress site with the Avada theme, my goal is to have a sticky header that starts immediately at the top of the page. This is the website in progress: The site I'm trying to emulate is synergymaids.com. If you vi ...

javascriptjquerycss

Can animations be stacked in a queue while using velocity.js?

I'm currently tackling a project involving a push menu. When the content div slides over, the menu buttons come in with a slight animation as they appear on the screen. However, if the user rapidly opens and closes the menu multiple times, the items o ...

javascriptjquerycssanimationvelocity.js

The display function in Javascript has a tendency to work sporadically

I’ve been tasked with creating my own tic tac toe game through coding. While I am relatively new to programming, I have a strong passion for it. At the moment, I've set up a basic function to hide only the "O", leaving only the "X" visible on the gr ...

javascripthtmlcssfunction

How to implement a Django block for loading CSS files

I have multiple pages and I need to load unique CSS for each page. I am using this method for all static files. In the head of my index.html file, I have the following code: {% block css %} {% endblock %} However, in my contact.html file, I have the fol ...

cssdjangostatic

What is the method for altering the text color within a disabled input field?

Currently facing difficulty in changing the color of the text within the input field when it's disabled. I'm utilizing Material UI for this purpose. import React from "react"; import { makeStyles } from "@material-ui/core/st ...

htmlcssreactjsmaterial-ui

How can I extract the page's output using JQuery?

Being a rookie in this area, I am eager to learn how to extract specific content from a page using AJAX in JQuery. Currently, I have been able to fetch the data of a page and display it as text: $.ajax({ type: "POST", url: "myfile.html", su ...

javascriptjqueryhtmlcssajax

Tips for applying/styling "All Items Center" and "Space Between Items" in CSS and ReactJS

justify-content: space-evenly; seems to be working correctly, but the desired output is not achieved I am aiming for something like this: https://i.stack.imgur.com/iQoWK.png However, this is what I currently have: https://i.stack.imgur.com/1PxGR.png ...

cssreactjsflexboxjsx