Row in Bootstrap 3 fails to display correctly on medium-sized devices

Having trouble with divs of different sizes? I want a row that shows 3-column wide divs on medium & large screens and 6-column wide divs on small devices.

<div class="container">
<div class="row">
    <div class="service col-sm-6 col-md-3">Lots of stuff</div>
    <div class="service col-sm-6 col-md-3">Less stuff</div>
    <div class="service col-sm-6 col-md-3">Whooa!</div>
    <div class="service col-sm-6 col-md-3">More stuff</div>
</div>

On medium & large screens:

––––––––   ––––––––   ––––––––   –––––––
| Lots |   | Less |   | Whoa |   | More |
| of   |   |stuff |   |     !|   |stuff|
––––––––   ––––––––   ––––––––   –––––––

But on small screens:

––––––––   ––––––––   
| Lots |   | Less |   
| of   |   |stuff |   
––––––––   ––––––––

––––––––   ––––––––   
| Whoa |   | More |
|     !|   |stuff|
––––––––   ––––––––

An easy fix would be to set a minimum height for the divs, but that's not an option here.

Can anyone help?

Edit: Check out this fiddle

csstwitter-bootstraptwitter-bootstrap-3

Answer №1

If you're using Bootstrap 3, here's the recommended approach:

To create some space between your second and third div elements, insert the following HTML snippet:

<div class="clearfix visible-sm"></div>

For a live demonstration, check out this example: .

More detailed information can be found in the documentation here: http://getbootstrap.com/css/#grid-responsive-resets

Answer №2

One way to approach this is by wrapping each pair of divs separately. Here's an example:

<div class="wrapper">
    <div class="section"> 
        <div class="box col-sm-6 col-md-3">Content here</div> |
        <div class="box col-sm-6 col-md-3">Some more content</div> |  
    </div>
    
    <div class="section"> 
        <div class="box col-sm-6 col-md-3">Wow!</div>        |
        <div class="box col-sm-6 col-md-3">Extra content</div> |  
    </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

When using React, I noticed that adding a new product causes its attributes to change after adding another product with different attributes on the same page

Imagine you are browsing the product page for a Nike T-shirt. You select black color and size S, adding it to your cart. The cart now shows 1 Nike T-SHIRT with attributes color: black, size: S. However, if you then switch to white color and size M on the ...

javascripthtmlcssreactjsarrays

The relationship between elements and text input positioning

I am faced with a unique challenge. As a user types in an input field, I need to display a reset button positioned center right of the input. I must adhere to the current HTML structure for the label, input, button, and error message and I prefer not to r ...

htmlcss

Tips for creating a CSS triangle background on a div without relying on borders or images

I have experience creating triangles using CSS borders and images, but this time I want to achieve it using background color. Here is the image of the desired outcome: https://i.stack.imgur.com/qP3yt.jpg If anyone can assist me with this, it would be gre ...

css

Adjust the baseline of the text within the <li> element by moving it 2 pixels upwards

My webpage menu is set up with inline lis within a ul. Each li has a colored border and contains an a element. I want to change the color of the text inside the a element and move it 2 pixels up when hovering over it without affecting the li border. How ...

htmlcssmenuhtml-listsmousehover

Odd behavior from CSS

Running into a bit of a snag with my website lately, specifically with the CSS. As I'm relatively new to web design, these issues tend to crop up more frequently. Usually, I can solve them on my own, but this one has me completely puzzled. What' ...

jqueryhtmlcssinternet-explorer

`Modifying CSS in Bootstrap 4 for a personalized website design`

I am currently building a Bootstrap website for my sister, but I am facing issues with changing the CSS. Most of the time, the changes do not seem to take effect. I created a new file called "style.css" to override the Bootstrap styles and placed it below ...

cssbootstrap-4

Bootstrap: Troubleshooting Margin Problems

I am currently utilizing the Bootstrap sb admin template. I attempted to include 3 columns in a row, but encountered the issue of them being merged together with no space around them. I experimented by modifying the Bootstrap file through a CDN link and pr ...

htmltwitter-bootstrapcss

Issue with multiple dropdowns not functioning in Bootstrap 5

Before you criticize my imports, here are the scripts I am using: <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script ...

htmlcsstwitter-bootstrapbootstrap-5

Unable to show inline within web forms application utilizing bootstrap

I am currently modifying the account registration section of a new VS 2013 web application that uses bootstrap css for formatting. I am working on creating a form on a page and struggling to get one section to display inline instead of as a block element. ...

csstwitter-bootstrap

Combining Images and Navigation in Next.js using Tailwind CSS

I am facing an issue where the image from a particular section overlaps with the Navbar dropdown on mobile devices. Adding z-50 to the navbar did not solve the problem as expected. What I want is for the image to remain below the dropdown menu when it is ...

javascriptcssnext.jstailwind-css

How can you prioritize one CSS file over another?

To avoid repetition, I wish to have all the classes, tags, and ids from css.css take precedence over bootstrap.min.css, without duplicating any from bootstrap.min.css. <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/css.css ...

htmlcss

What is the best way to horizontally align my divs and ensure they stack properly using media queries?

My layout is not working as expected - I want these two elements to be side by side in the center before a media query, and then stack on top of each other when it hits. But for some reason, it's not behaving the way I intended. I've tried to ce ...

javascripthtmlcss

What is the best way to display breadcrumb text on a new line within a pop up when the width exceeds without resorting to a scroll bar

Presently, my breadcrumb has a scrollable wrap with text overflow I want to make the overflowed text continue on the next line. How can I achieve this? The CSS code I am using for the image attached is as follows: .breadcrumb-css { text-overflow: ellip ...

htmlcssangular

Animating back with a jQuery if statement

Is there a way to implement an if statement that triggers an animation when the right image reaches +400px, and then animates back to -400px upon hovering over the image? $('#left img').mouseenter(function() { $('#right img').animate ...

javascriptjquerycssanimation

A distinctive web page featuring an engaging image backdrop: captivating content effortlessly scrolling beneath

On my website, I have implemented a background image with a fixed transparent header. When scrolling down, I want the main content to be hidden beneath the header. To achieve this effect, I used the -webkit-mask-image property. However, this approach affec ...

htmlcssimagescrolltransparency

What are the steps to create a dynamic dropdown effect for navbar content using animations similar to transitions?

IMPORTANT: THE NAVIGATION BAR IS NOT USING BOOTSTRAP When I hover over the "More" button, the dropdown content appears suddenly and disappears abruptly when moving the mouse away. I would like to add a transition effect to make the dropdown content appear ...

csshtml

Ways to insert a gap underneath every line

Hello, I'm struggling to create space below each line of code. I've tried using the br tag and margin property, but it didn't work. Can anyone help me with this? I'm not sure if the current HTML structure is correct or if I should swit ...

htmlcssrowlinespace

To modify the color of text in a mat-list-option item

Using the mat-selection-list component, I have set up a list of contacts displayed through mat-list-option: https://i.sstatic.net/ri4lP.png Currently, the background-color changes when I click on a specific contact-name (e.g. Graeme Swan), and it remains ...

cssangularangular-material

Arrange three div elements beside each other with the middle column containing two

My challenge involves figuring out how to display 3 divs on a webpage in a specific layout. Currently, I am able to get 2 divs to align next to each other using the float:left property. However, the third div always ends up positioned below the first one ...

csshtml

adverse offset and backdrop

To achieve the desired layout, I am trying to adjust the negative margin for the .text div so that it aligns on top of the .image div. <div class="wrap"> <div class="image"><img src="imgage.jpg" /></div> <div class="text ...

htmlcss