Unexpected behavior: Bootstrap columns collapsing into a single row

I recently started learning how to utilize Bootstrap columns and encountered a minor issue.

Whenever I shrink my browser window to the smallest size possible (or even halfway), causing the CSS rules for the columns to take effect, instead of adjusting to accommodate 4 images per row, they just align in a single line like this:

Below is the HTML code I am using with Bootstrap 3. Any assistance would be greatly appreciated.

<section class="container" style="padding-bottom: 60px;">
    <div class="row">

        <div class="col-md-6">
            <h2>Passion, precision, and simplicity</h2>
            <p>
                Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Maecenas metus nulla, 
                commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor 
                convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas 
                metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, 
                sodales tempor convallis et, iaculis ac massa.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, 
                <strong>commodo a sodales sed</strong>, dignissim pretium nunc. Nam et lacus neque. 
                Ut enim massa, sodales tempor convallis et, <strong>iaculis ac massa</strong>.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed,
                dignissim pretium nunc. Nam et <a href="#">lacus neque</a>. Ut enim massa, sodales tempor convallis 
                et, iaculis ac massa.
            </p>

            <!-- divider -->
            <div class="divider styleColor">
                <i class="fa fa-leaf"></i>
            </div>

            <!-- brands -->
            <div class="row">
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/1.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/2.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/3.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/4.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/5.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/6.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/7.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/8.jpg" alt="">
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div>
                <img alt="" class="img-responsive" src="../assets/images/demo/people/woman.jpg">
            </div>
        </div>
    </div>
</section>
htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

To achieve vertical stacking at a narrower width, consider using smaller breakpoints such as col-sm-*. Alternatively, you can utilize col-xs-* to prevent the columns from stacking.

For more information, visit:

It's worth noting that having columns totaling more than 12 units in a single row is not a problem. It will simply cause the row to wrap. This information can be found in the documentation (http://getbootstrap.com/css/#grid)..

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"

Answer №2

Check out the documentation here.

To maintain proper alignment and padding, place rows within a .container (fixed-width) or .container-fluid (full-width).

Remember that in a row, the total should always be 12. For example, you can have 4 columns of col-md-3, or a combination like 2x4+2x2.

For your particular situation, something similar to this might work.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<section class="container" style="padding-bottom: 60px;">
    <div class="row">

        <div class="col-md-6">
            <h2>Passion, precision and simplicity</h2>
            <p>
                Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Maecenas metus nulla, 
                commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor 
                convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas 
                metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, 
                sodales tempor convallis et, iaculis ac massa.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, 
                <strong>commodo a sodales sed</strong>, dignissim pretium nunc. Nam et lacus neque. 
                Ut enim massa, sodales tempor convallis et, <strong>iaculis ac massa</strong>.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed,
                dignissim pretium nunc. Nam et <a href="#">lacus neque</a>. Ut enim massa, sodales tempor convallis 
                et, iaculis ac massa.
            </p>

            <!-- divider -->
            <div class="divider styleColor">
                <i class="fa fa-leaf"></i>
            </div>

            <!-- brands -->
            <div class="row">
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/1.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/2.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/3.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/4.jpg" alt="">
                </div>
</div>
<div class="row">
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/5.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/6.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/7.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/8.jpg" alt="">
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div>
                <img alt="" class="img-responsive" src="../assets/images/demo/people/woman.jpg">
            </div>
        </div>
    </div>
</section>

Answer №3

To effectively manage your columns in smaller sizes, make sure to include col-sm-3 and col-xs-3 along with col-md-3.

For a visual example, refer to this link.

Answer №4

Make sure to utilize the "col-xs" classes for smaller devices instead of solely relying on "col-md-..." which targets medium-sized devices.

It's worth noting that combining classes like "col-xs-12 col-md-6" will adjust the element to display at 100% width on small devices and 50% width on medium devices or larger.

Remember, in the bootstrap grid system, each row can only contain a maximum of 12 columns.

For more information, visit http://getbootstrap.com/css/#grid-example-basic

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

Tips on utilizing jquery slideDown alongside appendTo

I am currently utilizing an ajax request to retrieve records from the database and then appending the data in HTML. However, I want the HTML to slide down once the data has been appended, but I'm unsure of how to achieve this. Below is the ajax metho ...

jquerycssajaxappendslideup

What could be causing the inability of select:-moz-focusring to eliminate the dotted lines in the Firefox browser on this bootstrap navigation

Is there a way to remove the Firefox dotted lines from my bootstrap navigation bar? I've come across suggestions to add the following code snippet to the CSS file: a:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; ...

cssangularjstwitter-bootstrapfirefox

Using Javascript to change CSS in a Polymer application

Coming from a background in angular and react, I am now delving into the world of polymer. I have a polymer class called myClass with the following template. <div id="[[x]]"> Here, 'x' is a property defined in a property getter. stat ...

javascripthtmlcsspolymerpolymer-3.x

I'm having trouble getting the gutter padding to show up in one specific content block on my Bootstrap webpage. How can I troubleshoot and resolve this

Currently, I am delving into the realm of Bootstrap 5 and have recently put together a simplistic webpage using the row/column structure suggested by Bootstrap. However, while my other columns seem to be cooperating and displaying the gutter padding as exp ...

htmlcssbootstrap-4

Step-by-step guide on achieving a radiant glow effect using React Native

I am looking to add a glowing animation effect to both my button and image elements in React Native. Is there a specific animation technique or library that can help achieve this effect? While I have this CSS style for the glow effect, I am uncertain if ...

javascriptcssreactjsreact-nativecss-animations

"Enhanced visuals with parallax scrolling feature implemented on various sections for an engaging

With 4 sections, each featuring a background image and text in the middle, I encountered an issue when attempting to have them fixed while scrolling. The goal was for the section below the first one to overlap the one above it along with its text as we scr ...

javascriptjquerycssparallaxparallax.js

How come the paragraph shifts downward when I use a jQuery custom plugin to add the image source?

Check out the code below: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title>Box using Plugin</title> <script> ...

jqueryhtmlcssjquery-plugins

Guide on using a while-loop in selenium with python to continuously run until a specific element is no longer present on the page

I'm currently facing a challenge with creating a while-loop that will run until a specific element is no longer present on a website. My existing solution gets the job done, but I know there's room for improvement. I would love to hear suggestion ...

pythonhtmlseleniumselenium-webdriver

Does anyone know if there is a way to use JavaScript to implement LESS in CSS files

Is there a way to perform variable substitution, especially in CSS using JavaScript? I am looking for a solution that offers more features than just variable substitution, such as the LESS syntax. Has anyone come across a JavaScript implementation of LES ...

javascriptcssless

Can CSS create a "half strikethrough" effect without relying on images?

Currently, I am in the process of developing a website that prioritizes responsiveness and speed by avoiding the use of any images. Instead, I aim to achieve desired effects solely through CSS. In the past, I would create a particular effect using the fol ...

htmlcssstrikethrough

Steps for adding an overlaying image in HTML and SCSS

First step: background-size: cover; Second step: background-size: contain; background-repeat: no-repeat; The third step is what I need: the first background image to be set as cover and the second one as an overlay with no-repeat Currently, my HTML incl ...

htmlcsssass

Browsing a container with JavaScript

I am attempting to display one div at a time and scroll through them repeatedly. I found and modified a Fiddle that works as intended, but when I try to implement it on my own test page, the divs do not scroll as expected. Here is the Fiddle example: http ...

javascriptjqueryhtml

Avoid using the table and table-striped classes when working with Bootstrap 5 to ensure a

Recently updated to bootstrap5.0.0-beta3 along with bootstrap-table 1.18.2 from webjars repository. Here's the code snippet: <table id="table">...</table> <!-- no classes here --> $('#table').bootstrapTable({ ...

cssbootstrap-tablebootstrap-5

Incorporating React's dynamic DIV layout algorithm to generate a nested box view design

My goal is to showcase a data model representation on a webpage, depicting objects, attributes, and child objects in a parent-child hierarchy. I had the idea of developing a versatile React component that can store a single data object while also allowing ...

javascriptcssreactjshtmluser-interface

Customizing Images using a JSON array of images

Looking to implement a feature that displays images fetched from a CMS via a JSON file. The JSON data structure is as follows: { "images": [ {"title": "Image One", "url": "image1.jpg"}, {"title": "Image Two", "url": "image2.jpg"}, {"title": "Ima ...

javascriptjqueryhtmlcssjson

How to create a donut chart in Highcharts without an inner pie section?

I've been scouring the internet in search of a solution to create a basic donut chart using the Highcharts library. Most examples I come across show donut charts with both an inner pie and outer donut (see here). Is there a way to remove the inner pi ...

javascripthtmlhighchartsdonut-chart

Having trouble with the float not working for the main content below the sidebar? Stay tuned

Here is the layout I am working with: .page-wrapper { height: 100%; min-height: 970px; position: relative; } .pageheader { min-height: 50px; position: fixed; min-width: 100%; } .navbar-fixed-top { top: 0; } .page-sidebar { float: left ...

htmlcssstylesfrontend

Bootstrap the registration form to center it in the layout

https://i.sstatic.net/IWSHz.png Here is the code snippet: <div class="col-md-4 col-md-offset-3">. I am new to Bootstrap and trying to center a form that is currently on the left. I have experimented with different col-md and col-xl numbers, but have ...

htmlbootstrap-4

Is it possible to divide searches into separate divs?

How can I display the results of my AJAX live search in different result divs for styling purposes? I want to style the results separately and have them appear one at a time. However, the current setup with 'element.style' is causing issues. Is ...

javascriptphpjqueryhtmlcss

Odd Behavior when altering button attribute using Jquery

After disabling a button with a click handler, I have noticed an interesting behavior where the button does not submit afterwards. The issue seems to vary between different browsers, with Firefox still allowing form submission after the button is disabled, ...

javascriptjqueryhtmlformsbutton