What's the best way to arrange 6 columns in sets of 3 across 2 rows?

Is there a way to arrange 6 columns in a grid so that the last 3 columns wrap onto a second row and all columns are centered? Specifically, I'm looking for a method to shift the first column by half the width of one column.

<div class="row mx-n2 d-flex justify-content-start justify-content-lg-center">
    <div class="col-6 col-lg-3"></div>
    <div class="col-6 col-lg-3"></div>
    <div class="col-6 col-lg-3"></div>
    <div class="col-6 col-lg-3"></div>
    <div class="col-6 col-lg-3"></div>
    <div class="col-6 col-lg-3"></div>
</div>
cssbootstrap-4flexbox

Answer №1

If you want to achieve center alignment, try using the following code:

.center {
  margin: 0 auto;
}
<div class="row">
  <div class="center">
    <div class="col-md-3">Div 1</div>
    <div class="col-md-3">Div 2</div>
    <div class="col-md-3">Div 3</div>
  </div>
</div>

<div class="row">
  <div class="center">
    <div class="col-md-3">Div 1</div>
    <div class="col-md-3">Div 2</div>
    <div class="col-md-3">Div 3</div>
  </div>
</div>

Answer №2

Instead of adding multiple .rows, an alternative approach is to utilize a .w-100 div that is visible only on large devices (using .d-none to generally hide it and .d-lg-block for display, breaking the line on large screens).

When combined with .justify-content-center, this achieves the desired outcome. See below for a minimal working example:

.col-6 {
  border: 1px solid gray;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75051a050510075b1f0635445b44475b4c">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171051f011f01">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f1d10100b0c0b0d1e0f3f4b514f514f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row justify-content-center">
    <div class="col-6 col-lg-3">1</div>
    <div class="col-6 col-lg-3">2</div>
    <div class="col-6 col-lg-3">3</div>
    <div class="w-100 d-none d-lg-block"></div>
    <div class="col-6 col-lg-3">4</div>
    <div class="col-6 col-lg-3">5</div>
    <div class="col-6 col-lg-3">6</div>
</div>

Display on small devices:

https://i.sstatic.net/H00wc.png

Display on large devices:

https://i.sstatic.net/WBV2i.png

Answer №3

You may insert the following in between:

 <div class="w-100"></div>

For example:

<div class="row mx-n2 d-flex justify-content-start justify-content-lg-center">
    <div class="col-6 col-lg-3"></div>
    <div class="col-6 col-lg-3"></div>
    <div class="col-6 col-lg-3"></div>
    <div class="w-100"></div>
    <div class="col-6 col-lg-3"></div>
    <div class="col-6 col-lg-3"></div>
    <div class="col-6 col-lg-3"></div>
</div>

Refer to this link for more details: https://getbootstrap.com/docs/4.1/layout/grid/#equal-width

Answer №4

  • To center your content, simply use the class justify-content-lg-center.
  • Bootstrap utilizes a 12-column grid system, so any columns that exceed this limit will automatically move to a new row. For example, in this case, the last three columns will shift to a new row.

div.col-lg-3 {
  border: 1px solid;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d313d31">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row justify-content-lg-center">
    <div class="col-6 col-lg-3">1</div>
    <div class="col-6 col-lg-3">2</div>
    <div class="col-6 col-lg-3">3</div>
    <div class="col-6 col-lg-3">4</div>
    <div class="col-6 col-lg-3">5</div>
    <div class="col-6 col-lg-3">6</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

The addClass and removeClass functions seem to be malfunctioning

Hey everyone, this is my first time reaching out for help here. I looked through previous questions but couldn't find anything similar to my issue. I'm currently working on a corporate website using bootstrap3 in Brackets. I've been testing ...

javascriptjqueryhtmlcsstwitter-bootstrap

Achieving the perfect alignment for expandable divs next to a consistently centered element using CSS

On my page, I want to ensure that the logo is always perfectly centered both horizontally and vertically when the page loads without any interactions. To achieve this, I used simple margin properties: margin: auto; position: absolute; top: 0; bottom: 0; ...

htmlcsscss-float

Tips for animating the box-shadow effect using jQuery

Can anyone provide insight on how to animate the box-shadow of multiple elements? I have reviewed previous threads such as this one, but found outdated and non-working solutions. Additionally, I came across the jquery box-animation plugin, which is limit ...

jqueryjquery-animatecss

- bullet point: tabulated

I need to create an unordered list with URLs included and indented, while keeping all lines justified to the left. * line one text text ted more text text text * line two text ted more text text text * line three text ted more text text text ...

css

Extending the length of the list items and their contents

Take a look at this website. I'm struggling with expanding the submenu list items in IE7. It seems that when you hover over one of the LIs under Restaurants, the green does not fill the entire line. I attempted using {width: 100%}, but it did not sol ...

htmlcsswidth

Create space between two table-cell div elements by adjusting the margin

Two buttons need to be displayed in one line with vertically aligned text, so I used display: table-cell. However, the two divs are sticking together and margin is not working. Is there a way to separate them? Check out the code here: http://jsfiddle.net/ ...

htmlcsscss-tables

What is the simplest method to remove numbered images after they have been clicked on?

I am working with a simple code that displays images of numbers 1-10 on the screen (named 1.jpg, 2.jpg, etc.). A random number is generated and when the correct image is clicked, a prompt appears. However, I want the incorrect image to disappear when cli ...

javascripthtmlcss

How to perfectly align a modal box in the center

Hey everyone, I could really use some help. I'm struggling to find the right formula to center this modal (http://www.queness.com/post/77/simple-jquery-modal-window-tutorial) on my browser, which has a size of 1263X582. I've been trying to use th ...

jquerycssjavascriptcentermodalpopupextender

Customizing CSS styles for various screen dimensions

I am facing an issue with my CSS code where I want to apply different styles for a specific class on smaller devices compared to larger screens. My project primarily uses Bootstrap, but I have also included some custom CSS. On "normal" sized screens, I hav ...

htmlcsstwitter-bootstrap

Automatically adjust column sizes using Bootstrap's responsive width feature

While I have a feeling this question might have been asked before, my search has turned up no similar issues. I am currently working on styling a menu bar using a standard bootstrap row and columns setup (flexbox). The menu is dynamically generated by Wor ...

htmlcssbootstrap-4flexboxflexboxgrid

Using setInterval together with jQuery to animate CSS based on changes in window size

I've been troubleshooting this issue and trying various methods, but despite it seeming logical, nothing is working. Any assistance would be greatly appreciated since I'm not very skilled in coding. My current challenge involves animating an obj ...

jquerycssanimationsetintervalwindow-resize

Error: The specified type '{ color: string; loading: true; css: string; size: number; }' cannot be assigned to the type 'IntrinsicAttributes & LoaderSizeMarginProps'

When attempting to build the project, an error occurred: $ yarn run build yarn run v1.22.19 $ next build info - Loaded env from D:\folder_1\my_Project\client\.env.local info - Linting and checking validity of types .Failed to compile. ...

javascriptcssreactjstypescriptnext.js

Opting for a CSS framework instead of building custom CSS from scratch

In my quest to achieve the best CSS practices on my website, I initially relied on my own custom CSS. However, I then discovered the option of using CSS frameworks like Bootstrap or Foundation Zurb. While I believed that using a framework alone would meet ...

csstwitter-bootstrapzurb-foundationcss-frameworkscascade-framework

Are there ways to implement Vue.js transitions without directly setting the height in the code?

I'm having an issue with a Vue app I created where I need to make an element expand and collapse when a button is clicked. I want the effect to be smooth and animated, but using the <transition> tag alone isn't working as expected. The prob ...

cssvue.jstransition

Outlook's Dilemma with Background Images

I'm currently developing a new newsletter template, and I've encountered an issue with background images not displaying properly in Outlook. The code below illustrates the desired layout: <table style="width: 600px;" align="cent ...

htmlcssoutlookhtml-email

I'm having trouble getting my <aside> HTML tag to align properly within my grid section

I'm struggling with setting up grids. I have defined the boundaries and everything seems to fall into place within the grid, except for my aside element that I want to appear on the right side of the screen. Interestingly, this issue arises when using ...

htmlcsssasscss-grid

Issues with the functionality of Bootstrap 4's carousel-fade feature

I'm encountering an issue with Bootstrap's carousel. I have a set of images with varying resolutions and aspect ratios, and when I apply the carousel-fade effect, the animation appears glitchy when two images with different ratios are displayed n ...

htmlcssbootstrap-4

Adjusting layout to second row based on screen width using CSS media query

My div contains the following elements: <div> <a class="postLink" href="{{post.authorLink}}" target="_blank">{{post.author}}</a> <span class="">Published: {{ post.published}}</span> <a class="postLink" href="{ ...

cssmedia-queries

"Utilize a 3-column layout with the center column aligned to the

I am working on an interesting task. <div class="slider"> <div class="1s">1st slide</div> <div class="2s">2nd slide</div> <div class="3s">3d slide</div> </div> Here is the CSS code: .slider div { ...

csshtmlslider

Is there a way for me to retrieve the header values of a table when I click on a cell?

I have a project where I am developing an application for booking rooms using Angular 2. One of the requirements is to be able to select a cell in a table and retrieve the values of the vertical and horizontal headers, such as "Room 1" and "9:00". The data ...

htmlcssangulartypescript