Arranging Bootstrap grid elements side by side

When setting up a webshop, I am organizing products into col-md-3 class divs. However, in mobile view, these divs are stacked on top of each other.

I would like to have 2 divs displayed side by side when viewing on a mobile device. How can I achieve this? Should I use the col-md-3 class along with adding a col-xs-6 class to the divs?

<div class="col-md-3 col-xs-6">
  <span class="ribbon-ketsoros">Free<br>shipping</span>
  <a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" title="Gigabyte Z370 AORUS GAMING 7-OP Motherboard" class="main_item_img_to_link">
    <img src="https://domain.hu/images/item/th-8888-28950.jpg" alt="Gigabyte Z370 AORUS GAMING 7-OP Motherboard" class="img-responsive">
  </a>
  <h2 class="main_item_title"><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" title="Gigabyte Z370 AORUS GAMING 7-OP Motherboard" class="main_item_title_to_link">Gigabyte Z370 AORUS GAMING 7-OP Motherboard</a></h2>
  <span class="main_item_cikkszam">Item Number: 997872</span>
  <span class="main_item_kiszereles">Packaging: Piece</span>
  <span class="main_item_kiszereles"><b>In Stock</b></span>
  <input type="hidden" value="1" id="MinimumOrder186"><span class="main_item_price_2">101,290 Ft</span>
  <span class="main_item_price_3">Discounted Price: 97,290 Ft</span><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" class="kiemeltek_to_link" title="Product Page">Product Page <i class="fa fa-info-circle" aria-hidden="true"></i></a>
</div>

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Answer №1

Check out the code snippet below to see how two divs are displayed side by side for small screens and beyond:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <span class="ribbon-discount">Free<br>Shipping</span>
      <a href="https://example.com/product/123/sample-product" title="Sample Product" class="main_item_img_to_link">
        <img src="https://example.com/images/product/th-123-456.jpg" alt="Sample Product" class="img-responsive">
      </a>
      <h2 class="main_item_title"><a href="https://example.com/product/123/sample-product" title="Sample Product" class="main_item_title_to_link">Sample Product</a></h2>
      <span class="main_item_sku">SKU: 987654</span>
      <span class="main_item_packaging">Packaging: Pieces</span>
      <span class="main_item_packaging"><b>In Stock</b></span>
      <input type="hidden" value="1" id="MinimumOrder123"><span class="main_item_price_2">$99.99</span>
      <span class="main_item_price_3">Sale Price: $79.99</span><a href="https://example.com/product/123/sample-product" class="highlighted_to_link" title="Product Details">Product Details <i class="fa fa-info-circle" aria-hidden="true"></i></a>
    </div>
    
    <div class="col-sm-6">
      <span class="ribbon-discount">Free<br>Shipping</span>
      <a href="https://example.com/product/123/sample-product" title="Sample Product" class="main_item_img_to_link">
        <img src="https://example.com/images/product/th-123-456.jpg" alt="Sample Product" class="img-responsive">
      </a>
      <h2 class="main_item_title"><a href="https://example.com/product/123/sample-product" title="Sample Product" class="main_item_title_to_link">Sample Product</a></h2>
      <span class="main_item_sku">SKU: 987654</span>
      <span class="main_item_packaging">Packaging: Pieces</span>
      <span class="main_item_packaging"><b>In Stock</b></span>
      <input type="hidden" value="1" id="MinimumOrder123"><span class="main_item_price_2">$99.99</span>
      <span class="main_item_price_3">Sale Price: $79.99</span><a href="https://example.com/product/123/sample-product" class="highlighted_to_link" title="Product Details">Product Details <i class="fa fa-info-circle" aria-hidden="true"></i></a>
    </div>

  </div>
</div>

Answer №2

Simply using the col grid class will line up the divs horizontally across all screen sizes. Bootstrap manages the width distribution automatically. Refer to the bootstrap documentation for detailed information on the grid system.

<div class="container">
  <div class="row">
    <div class="col"> <!--Col 1-->
      <span class="ribbon-ketsoros">Free<br>shipping</span>
      <h2 class="main_item_title"><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap"
                                     title="Gigabyte Z370 AORUS GAMING 7-OP Motherboard" class="main_item_title_to_link">Gigabyte
        Z370 AORUS GAMING 7-OP Motherboard</a></h2>
      <span class="main_item_cikkszam">Article number: 997872</span>
      <span class="main_item_kiszereles">Packaging: Piece</span>
      <span class="main_item_kiszereles"><b>In Stock</b></span>
    </div>

    <div class="col"> <!--Col 2-->
      <span class="ribbon-ketsoros">Free<br>shipping</span>
      <h2 class="main_item_title"><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap"
                                     title="Gigabyte Z370 AORUS GAMING 7-OP Motherboard" class="main_item_title_to_link">Gigabyte
        Z370 AORUS GAMING 7-OP Motherboard</a></h2>
      <span class="main_item_cikkszam">Article number: 997872</span>
      <span class="main_item_kiszereles">Packaging: Piece</span>
      <span class="main_item_kiszereles"><b>In Stock</b></span>
    </div>
  </div>
</div>

I've also put together a codepen with the code above, feel free to experiment and see the results.

Answer №3

It is true that most of the Bootstrap templates use a combination of col- classes. To make two divs stand next to each other in mobile mode, simply add col-xs-6 to the first div and col-xs-6 to the second div within a div class="row" wrapping around them. This code snippet is specifically for Bootstrap v3.3.7 as some col-classes have changed in Bootstrap 4:

 <div class="container">
    <div class="row"> <!-- 1 ROW = 12 COLUMNS OF GRID -->
    <!-- YOUR PRODUCTS LIST -->
       <!-- FIRST DIV-->
       <div class="col-md-3 col-xs-6 col-lg-3 col-sm-6">
        ... // THE CONTENT HERE
       </div>
       <!--SECOND DIV-->
       <div class="col-md-3 col-xs-6 col-lg-3 col-sm-6">
       </div>
    <!--END OF YOUR PRODUCTS LIST-->
    </div>
</div>

Keep in mind that a row in Bootstrap contains 12 columns, so when using a mix of classes like this:

 col-md-3 = 3/12 = 1/4 ( in larger desktop mode )
 col-xs-6 = 6/12 = 1/2 in mobile mode
 col-lg-3 = 3/12 = 1/4 ( in desktop mode )
 col-sm-6 = 6/12 = 1/2 in tablet mode

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

Managing browser back button functionality

I've been struggling to find a solution for handling the browser back button event. I would like to prompt the user with a "confirm box" if they click on the browser back button. If they choose 'ok', I need to allow the back button action, ...

javascriptjqueryhtmlbrowser

If the iframe's CSS source is updated, the parent's CSS source will also change

I'm currently working on a unique school project that involves creating multiple CSS styles for different views. <link rel="stylesheet" type="text/css" href="css/main.css" title="main" media="screen"> <link rel="stylesheet" type="text/css" h ...

javascriptjqueryhtmlcssiframe

Issue with Bootstrap dropdown menu not showing up/functioning

I've spent the entire day trying to find a solution and experimenting with various methods, but I'm still unable to get it to work. The navbar-toggle (hamburger menu) shows up when the window is resized, but clicking on the button doesn't di ...

htmltwitter-bootstrapcssmenu

css problem with stacking order of child elements

Trying to arrange 3 HTML elements on the z-plane: .bank { width: 200px; height: 200px; background-color: grey; position: absolute; z-index: 100; transform: translateY(10%); } .card { width: 100px; height: 100px; background-color ...

cssz-index

Zurb Foundation - Building a personalized form, but encountering issues with post creation functionality

After integrating Foundation Forms into my website to create a form, I am facing an issue where the post is not being created. Below is the HTML code snippet: <div style="padding-bottom: 5px; padding-top: 10px;"> <label> <h3><sma ...

htmlcssdjangoformszurb-foundation

How to use puppeteer to extract images from HTML that have alt attributes

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 nopadding text-center"><!-- Start Product Photo --><div class="row"><img src="/products/ca/downloads/images/54631.jpg" alt="Product image 1">&l ...

javascripthtmlnode.jspuppeteer

Utilizing Angular's ngShow and ngHide directives to hide spinner when no data is retrieved

I'm having an issue with the HTML code below. It currently displays a spinner until a list of tags is loaded for an application. However, the spinner continues even if no events exist. I want to make the spinner disappear and show either a blank inpu ...

javascriptjqueryhtmlangularjs

The functionality of the anchor tag is restricted in both Chrome and Safari browsers

I'm having an issue with HTML anchor tags not working properly in Chrome and Safari. Instead of scrolling up, the page scrolls down when clicked. Here is the HTML code I'm using: <a id="to-top"></a> <a class="button toTop" href="# ...

javascriptjqueryhtmlcssgoogle-chrome

Animating lines with JQuery beneath navigation links

Currently in the process of revamping my portfolio website, and it's still a work in progress. Recently stumbled upon a jquery tutorial that enables a line to animate under anchor elements on hover, which I find quite intriguing. However, I am facing ...

jqueryhtmlcssanchor

Hover over to disable inline styling and restore default appearance

There are some unique elements (.worker) with inline styles that are dynamically generated through Perl. I want to change the background when hovering over them and then revert back to the original Perl-generated style. The only way to override the inline ...

javascriptjqueryhtmlcssperl

The video being shown in Jupyter Notebook is unable to be played

I'm attempting to insert a video stored on my local drive into Jupyter Notebook. The file goes by the name "openaigym.video.6.7524.video000000.mp4" and is located within a folder named "gym-results". Despite using the code below, I am not seeing any ...

pythonhtmlvideojupyter-notebook

What is the best way to activate CSS filters on VueJS once the project has been compiled?

While working on a Node server locally, my SVG filter functions properly. However, once I build the project and run it on a server, the filter stops working. This VueJS project is utilizing Webpack as its build tool. The process of building the app invol ...

javascriptcsssvgvue.jsfilter

JQuery Mobile header style vanishing when applied to a page generated dynamically

My second page retrieves data from an Ajax call on the home page, but the header lacks JQuery styling and I suspect a connection between the two. Here is the HTML for the dynamically generated page: <div data-role="page" id="breakdownDialog" data-add-b ...

cssjquery-mobilemobiledynamically-generated

What is the best way to position a div in relation to a table header (th) but not inside it?

I'm trying to create a table header that displays a help text (div) when clicked on. However, the help div is causing the table header to be larger than the other headers. Below is the code snippet: #help_box { border-radius: 20px; ba ...

htmlcsshtml-tableorientation

What is the best way to open the index.html file in electron?

I'm currently developing a cross-platform app using electron and Angular. As of now, the code I have for loading my index.html file looks like this: exports.window = function window() { this.createWindow = (theBrowserWindow) => { // Create ...

javascripthtmlelectronload

Ways to achieve 8 columns in a single row using Javascript and Bootstrap

Recently, I created a simple function for searching movies and manipulating them in the DOM. The issue arises when a movie name is entered and the API response returns around 20-30 recommendations. I wanted to display this fetched data in 8 columns per row ...

javascripthtmltwitter-bootstrapdombootstrap-4

The issue with the placement of the Bootstrap navbar-brand

My regular bootstrap navbar is presenting a problem where the item "navbar-brand" appears higher than the other items in the navbar, which seems illogical. This issue does not occur on the official bootstrap page and persists even when tested on jsfiddle. ...

htmlcsstwitter-bootstrap

What happens when Image Buttons are clicked in SAPUI5 and their onchange event is triggered

Is there a way to update the image on a button after it has been clicked? I want it to switch to a different image when activated. var offButton = new sap.ui.commons.Button({ id : "offIcon", icon : "img/off.png" , press :functio ...

javascriptjqueryhtmlcanvassapui5

The Evolution of Bulma's Navigation Menu

Creating a transparent menu in Bulma has been successful for the desktop viewport: VIEW DESKTOP MENU However, when attempting to implement the same design on mobile, the menu ends up like this: VIEW MOBILE/TABLET MENU The mobile version seems to inheri ...

javascripthtmlcssviewportbulma

Font size determined by both the width and height of the viewport

I'll be brief and direct, so hear me out: When using VW, the font-size changes based on the viewport width. With VH, the font-size adjusts according to the viewport height. Now, I have a question: Is there a way to scale my font-size based on ...

javascripthtmlcsssass