Ensuring stackable columns are centrally aligned using justify-content-center

My goal is to create a responsive layout with x columns that display 3 columns per row on lg screen sizes, aligned using justify-content-between. When the screen size is smaller than lg, all x columns should stack vertically and be aligned using justify-content-center.

The key factor I am keeping in mind is that the surrounding column divs need to be the same, allowing me to easily switch column 7 with column 3 without making individual changes to each column div.

This is what I have so far:

<div class="d-flex justify-content-between">
    <div class="col-lg">
        <div style="width: 288px;" class="justify-content-center bg-primary">col 1</div>
    </div>
    <div class="col-lg">
        <div style="width: 288px;" class="justify-content-center bg-secondary">col 2</div>
    </div>
    <div class="col-lg">
        <div style="width: 288px;" class="justify-content-center bg-warning">col 3</div>
    </div>
    <div class="col-lg">
        <div style="width: 288px;" class="justify-content-center bg-primary">col 4</div>
    </div>
    <div class="col-lg">
        <div style="width: 288px;" class="justify-content-center bg-secondary">col 5</div>
    </div>
    <div class="col-lg">
        <div style="width: 288px;" class="justify-content-center bg-warning">col 6</div>
    </div>
</div>

View JSFiddle here.

I'm encountering two main issues:

  • When wrapping the columns in a .col, it disrupts justify-content-between
  • Columns 4, 5, and 6 are not automatically moving to the next row as expected

Any assistance would be greatly appreciated!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you're considering using CSS Grid, I've created a simple layout with 3 columns on each row, spaced evenly between them. They stack on top of each other when the screen size reaches the large breakpoint from Bootstrap. Check it out below and let me know if it fits your requirements!

.grid {
  display: grid;
  grid-template-columns: repeat(3, 288px);
  grid-auto-rows: minmax(100px, auto);
  justify-content: space-between
}

.grid-item {
  border: 1px solid black;
}

@media (max-width: 992px) {
  .grid {
    grid-template-columns: 288px;
    justify-content: center;
  }
}
<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</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

utilize a modal button in Angular to showcase images

I am working on a project where I want to display images upon clicking a button. How can I set up the openModal() method to achieve this functionality? The images will be fetched from the assets directory and will change depending on the choice made (B1, ...

htmlangulartypescriptmodal-dialogassets

How can we use jQuery to target an element based on the text content of the one preceding it?

For example: <div id="input-content" contenteditable="true"> <p>Some text<p> <p>Some text<p> <p><br></p> <p>Some text<p> <!-- I would like to target the p tag following the p tag with br --> ...

jqueryhtml

Issue with Jquery change event not functioning as expected

My webpage consists of the following HTML code: <form id="fileuploadform"> <input type="file" id="fileupload" name="fileupload" /> </form> Accompanied by this snippet of jQuery code: $(':file').change(function(){ var ...

javascriptjqueryhtml

Issue with sliding panel not working smoothly in Internet Explorer

Is there a way to remove the added margin when opening the info slide panel? The issue seems to only occur in IE (using the IE tab plugin for Firefox) and in IE7 and IE8, the tooltip does not display. Thank you for any assistance. Site Link ...

jquerycssinternet-explorer

Modifying SAS ODS contentitem in PROC SQL SELECT query

When using SAS to generate ODS output in HTML format, you have the option to include a table of contents with the "CONTENTS" and "FRAME" settings: ODS HTML PATH="C:\Path\" (url=none) BODY="body.html" CONTENTS="contents.html" ...

htmlsqlsas

Dynamically submitting a form generated within the AJAX success callback in CodeIgniter

After creating a form dynamically within the success function of an AJAX call, I expected it to submit like a normal form in CodeIgniter. However, upon clicking the submit button, the form data is not being picked up by the appropriate controller. The ori ...

javascriptphphtmlajaxcodeigniter

The video header on my webpage refuses to start playing upon loading

I have a video displayed in the header of my website, but it only starts playing once the user clicks on the home link in the menu to navigate to /index.html. It does not play automatically when the page first loads. I have also tried manually entering /in ...

htmlcssvideohtml5-video

Submit Form using Ajax - Update text in HTML element upon click

As I am working on developing a message system, I encountered an issue where the message content is not opening correctly in my template when clicking the "See" button. My intention is to implement an Ajax call that will replace the content with jQuery .te ...

javascriptphpjqueryhtmlajax

What is the best way to align text in the center based on a specific portion of the content?

I'm working on an inline flex div where I want to create a unique effect using the words wrap and the div overflow. As the window is resized, some of the words in the sentence will disappear, altering the meaning. The width will determine the result: ...

htmlcss

Initiate Bootstrap 4 dropdown menus from the initial menu point

I need the dropdown menus to align with the position of the first dropdown. There are multiple dropdowns on the page. Check out the screenshot for reference. JSFiddel: https://jsfiddle.net/kfh9Lbep/ https://i.sstatic.net/hHAKz.png Any ideas on how to ac ...

jquerytwitter-bootstrapcssbootstrap-4

display the entire calendar for the chosen month

I am currently using Foundation Datepicker and Full Calendar. My requirement is as follows: 1) When I select a date in the calendar, For example, let's say it's July 2016. If I choose a date in November or any other month in the Foundation Date ...

jquerycssdatepickercalendar

Implementing smooth transitions on iPad screens with responsive text

I am currently working on a personal project that involves creating images with hover transitions. The transition effect works perfectly on all browsers except for iPads. I'm facing an issue where I can't click on the image due to the presence of ...

htmlcssipadtextcss-transitions

Instead of displaying a regular text box, the output unexpectedly shows "Printing [object HTML

There are some HTML and JavaScript files that I have. I've written some functions in my JavaScript file to save the values of different input fields. However, when I try to print the description, it just displays [object HTMLInputElement]. This mak ...

javascripthtml

Passing data from the <ion-content> element to the <ion-footer> element within a single HTML file using Ionic 2

In my Ionic 2 html page, I have a setup where ion-slide elements are generated using *ngFor. I am seeking a way to transfer the data from ngFor to the footer section within the same page. <ion-content> <ion-slides> <ion-slide *n ...

htmlangularionic2angularjs-interpolate

Refreshing a controller by clicking it from another controller in AngularJS

Here is some HTML code I have been working on. I have a function in moreThanOne.html which sets a variable show to true. This causes it to load one.html for the first time and call the init method of my controller. However, if I change the valu ...

javascriptjqueryhtmlangularjs

Tips for eliminating gaps between form fields when utilizing Bootstrap Flask's render_form_row function

Is there a way to incorporate the "no-gutters" style when using the render_form_row function in bootstrap-flask? Check this link for more information I attempted the following code but it didn't yield the desired result: {{ render_form_row([form.var ...

flaskbootstrap-4jinja2bootstrap-flask

How Jquery Can Be Used to Dynamically Add Extra Rows in HTML Without Submitting Data via POST Requests

When using jQuery to dynamically add extra rows to an HTML table, I encountered an issue where the fields of the extra rows were missing in the $_POST array when submitting the form. Can you please review the code and provide a solution to fix this problem ...

jqueryhtmlajax

Limit the ability to zoom in a webview application

I am facing an issue with my Android WebView app that is designed to load a specific URL and display it along with its links within the app. Despite setting the webpage size to 720px x 1280px using CSS to fit the screen of a Galaxy S3, I am encountering di ...

androidcssandroid-webview

What steps can I take to avoid random divs from overlapping on smaller screens when dealing with elements created in the created() hook?

I encountered an issue with the code I'm working on (the circles overlap in the fiddle provided, but display correctly on my PC - possibly due to pixel discrepancies in the fiddle). You can find the code here. TestCircle.vue: <template> <d ...

javascripthtmlcssvue.jsvuejs3

Guide on implementing "Displaying 1 of N Records" using the dataTables.js framework

let userTable = $("#user_table").DataTable({ 'sDom': '<"row-drop"<"col-sm-12 row"lr>><"row"t><"row-pager"<"col-sm-12 col-md-5"i><"col-sm-12&qu ...

javascripthtmljquerydatatabledatatables