On medium screens, Bootstrap 5's layout transforms five equal columns into two rows that are centered on the page

Looking to achieve a layout where, on desktop sizes, I have 5 equal-width columns spaced evenly. When viewed on mobile, it should break down to 1 column. And on medium sizes, I want it to break down into two rows with the bottom row evenly spaced and centered below the top row, like this:

https://i.sstatic.net/8EVAA.jpg

Is there a way to achieve this using Bootstrap 5 built-in classes, or would I need to add custom CSS for this setup? Here's what I have tried so far:

img {
  max-width:100%;
}
.row .col-6 {
  margin-top:30px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e0ededf6f1f6f0e3f2c2b7acb2acb0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row text-center justify-content-between">
    <div class="col-6 col-md-auto">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col-6 col-md-auto">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col-6 col-md-auto">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col-6 col-md-auto">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col-6 col-md-auto">
      <img src="https://via.placeholder.com/200x100" />
    </div>
  </div>
</div>

Current issue: The 4th column is aligning directly below the 1st column, and the 5th column is aligning below the 3rd column.

cssbootstrap-5

Answer №1

"When viewing on mobile, I'd like the layout to collapse into a single column, and then on medium-sized screens, I want it to split into two rows."

Ensure you utilize col-12 for a single column on mobile and then simply use justify-content-center for the row alignment...

<div class="container">
    <div class="row text-center justify-content-center">
        <div class="col-12 col-md-auto">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-auto">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-auto">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-auto">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-auto">
            <img src="https://via.placeholder.com/200x100" />
        </div>
    </div>
</div>

Codeply

However, it's not clear whether you want 2 rows on md and wider, or only on md. For 2 rows on md and wider, use specific column sizes like col-md-4.

<div class="container">
    <div class="row text-center justify-content-center">
        <div class="col-12 col-md-4">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-4">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-4">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-4">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-4">
            <img src="https://via.placeholder.com/200x100" />
        </div>
    </div>
</div>

Answer №2

For improved alignment, consider utilizing the .justify-content-md-evenly and .row-cols classes.

img {
  max-width: 100%;
}

.row [class^="col"],
.row [class*=" col"] {
  margin-top: 30px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9c848e9c878ba18b8291a9049e818d96248f8381">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row row-cols-1 row-cols-md-auto text-center justify-content-between justify-content-md-evenly">
    <div class="col">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col">
      <img src="https://via.placeholder.com/200x100" />
    </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

Centering items in Material UI Grid

I'm currently grappling with understanding Material UI's grid system and implementing it in React.js, and I find it a bit perplexing. My goal is to center the spinner loader and text irrespective of viewport size. While I can manage to place the ...

cssreactjsmaterial-uicentering

Steps for creating a link click animation with code are as follows:

How can I create a link click animation that triggers when the page is loaded? (function () { var index = 0; var boxes = $('.box1, .box2, .box3, .box4, .box5, .box6'); function start() { boxes.eq(index).addClass('animat ...

javascriptjquerycss

Loading a specific CSS file along with an HTML document

Creating a responsive website, I'm looking to incorporate a feature that allows for switching between a mobile version and a standard desktop version similar to what Wikipedia does. To achieve this, I would need to reload the current HTML file but en ...

phpjavascriptcssswitch-statement

Stylish Combobox with jQuery and CSS

Seeking assistance in creating a stylish combo box using CSS and jQuery. The combo box will contain 3 items, and I need guidance on how to select items within the combo box and display the selected item. Any help or suggestions would be greatly appreciated ...

jquerycsscombobox

Error message: "Encountered 'Cannot Get' error while building Angular

I encountered an error when trying to run my Angular project in IntelliJ. Upon opening the browser on localhost, I received the message Cannot GET / Here are the steps I followed: Opened up the project Ran npm install -g @angular/cli@latest Ran gradlew c ...

cssnode.jsangularwebpackangular-cli

Tips for positioning text within a div element's bottom edge

I'm facing a challenge in creating a footer for a div element that contains a <p> tag. The issue arises when the font size varies, causing the footer to extend outside the box. How can I ensure that it aligns at the bottom of the page with the c ...

htmlcss

How to Alter the Color of a Hyperlink in HTML

I've been working on an angular2 application and I'm using a hyperlink to trigger a method that opens a small popup window. I've tried different methods to change the color of the link when it's clicked, but so far none have worked. Th ...

htmlcssangular

Minimize the expansive width of Shiny Dashboard's sidebar for

I'm facing a challenge in hiding a shinydashboard sidebar with a wider width. Upon increasing the width, however, the sidebar isn't completely disappearing from the screen. Here's an example that illustrates the issue I'm trying to add ...

htmlcssrshinyshinydashboard

Padding provides varying padding for the top and bottom sections

html { font-size : 10px; } body { text-align : center; color : #9da8c1; font-family : sans-serif; background : #013f81; } h1 { font-size: 4rem; } #img-div { background : #2a5590; width : 600px; margin : 0 auto; pad ...

htmlcss

Tips for employing 'live CSS' in Rails

As someone who is new to Ruby on Rails, I am currently facing a challenge. I want to extract data from specific fields in my database and utilize them for styling purposes. For instance, within my 'Student' database, there are height and width f ...

htmlcssruby-on-railsruby

Unable to locate the element within the specified div using xpath or css selector

I have attempted to retrieve the output "January 27" using this code: task_offer_deadline = driver.find_element_by_xpath('//*[@id="table"]/div[2]/div/a/div[1]/span[2]/div/em').text The xpath was obtained from Google Chrome Console. Here is a sn ...

pythoncssseleniumxpathelement

Is there a way to retrieve the filename of a file uploaded using a shiny fileInput function?

This shiny app has a feature where users land on the 'Upload data' panel upon launching. To restrict access to the other two 'tabpanels', users must first upload both necessary files in the 'Upload data' tab. The condition for ...

javascripthtmlcssrshiny

A Firefox Browser View of a Next.js and Tailwind Website magnified for closer inspection

After creating a website using Next.js and Tailwind CSS, I noticed that the site is appearing zoomed in when viewed in Firefox. However, it looks fine in all other browsers. When I adjust the screen to 80%, the website displays correctly in Firefox. What ...

javascripthtmlcssreactjsnext.js

Unable to calculate height properly when using the formula height: 70% + 0px

My attempt to set the height of a div element to 70% using CSS3's calc() function has been unsuccessful. While specifying viewport height (70vh) works, I specifically need the height to be 70%. .scroll-inner-container { height: -moz-calc(70vh + 0 ...

jqueryhtmlcsscss-selectors

Reduce the flexbox container to match the dimensions of its child elements

I have a set of blocks with fixed dimensions that I want to arrange in a grid layout. Using flex-wrap: wrap, I can distribute as many blocks as possible in each row. However, I need the entire wrapped column to be centered on the page, similar to this: ht ...

htmlcssflexbox

Utilizing jQuery to accentuate a specific div element when it is positioned directly in the center of the browser window

I have multiple divs with id="scroll_1", "scroll_2", "scroll_3", and so on. I am trying to implement a feature where when any of these divs is in the center of the window, I want to change the background color using jQuery highlight. Currently, I am able t ...

jqueryhtmlcss

Creating a component that surpasses all others

I have a code snippet that contains styling information for two div elements. How can I ensure that my <div id="home"> appears below my <div id="navigate"? Any suggestions? #home { background-color: black; color: grey; text-align: c ...

htmlcss

What is the best way to distinguish elements in the same HTML using Angular Material?

Currently, I am working on a project using Angular material, where I have a component.html file that defines a form and a table with data. In the first image of my project, you can see the tab title, a form to add new records, and the table displaying exi ...

cssangularangular-materialgridangular11

Nav Dropdown Beyond Container Bounds

I'm working on implementing a flexbox navigation menu with dropdowns for certain items. However, I've encountered an issue where the dropdown lists are appearing to the right of the container on hover, rather than below it as expected for a typic ...

htmlcssflexbox

Ensuring consistent column widths in tables using Bootstrap 5 and Angular

In my angular application using Bootstrap 5, I have a table structured like this <table> <thead> <tr> <th [ngClass]="{'d-none':prop1==0}"></th> <th [ngClass]="{'d-none':prop2==0} ...

angulartwitter-bootstrapbootstrap-5