How can I apply justify-content exclusively to the first row with Bootstrap 4?

I need a solution where the rows generated dynamically within a div are centered only if it is the first row. If there is only one row and the elements in that row do not fill up to the specified Bootstrap class properties 

col-xl-3 col-lg-4 col-md-6 col-sm-12
, then align them center. However, when there are more elements causing a second row to be created, the elements in the second row should start from the left, not from the center.

Is there a specific keyword for this requirement or will I have to implement some logic myself? The code snippet is provided below:

.col-3 {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 
     Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row col-xl-3 col-lg-4 col-md-6 col-sm-12 justify-content-center">
    <div class="col-3">1</div>
    <div class="col-3">2</div>
    <div class="col-3">3</div>
    <div class="col-3">4</div>
    <div class="col-3">5</div>
    <div class="col-3">6</div>
  </div>
</div>

htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

To align the last column to the right, you can use either margin-right: auto; or apply the .me-auto class on the last child with the .col-3 class.

.col-3 {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}

.row>.col-3:last-child {
  margin-right: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 
     Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container mb-4">
  <h4> Apply margin-right: auto; or .me-auto on the last child </h4>
  <div class="row col-xl-3 col-lg-4 col-md-6 col-sm-12 justify-content-center">
    <div class="col-3">1</div>
    <div class="col-3">2</div>
    <div class="col-3">3</div>
    <div class="col-3">4</div>
    <div class="col-3">5</div>
    <div class="col-3">6</div>
  </div>
</div>

You could also opt to remove the justify-content-center class as an alternative way to achieve the same effect. Refer to the notes in the snippet above for further details.

.col-3 {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 
     Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container mb-4">
  <h4> With justify-content-center class applied </h4>
  <div class="row col-xl-3 col-lg-4 col-md-6 col-sm-12 justify-content-center">
    <div class="col-3">1</div>
    <div class="col-3">2</div>
    <div class="col-3">3</div>
    <div class="col-3">4</div>
    <div class="col-3">5</div>
    <div class="col-3">6</div>
  </div>
</div>

<div class="container mb-4">
  <h4> Without justify-content-center class applied </h4>
  <div class="row col-xl-3 col-lg-4 col-md-6 col-sm-12">
    <div class="col-3">1</div>
    <div class="col-3">2</div>
    <div class="col-3">3</div>
    <div class="col-3">4</div>
    <div class="col-3">5</div>
    <div class="col-3">6</div>
  </div>
</div>

<div class="container mb-4">
  <h4> Full width with justify-content-center class </h4>
  <div class="row col-sm-12 justify-content-center">
    <div class="col-3">1</div>
    <div class="col-3">2</div>
    <div class="col-3">3</div>
    <div class="col-3">4</div>
    <div class="col-3">5</div>
    <div class="col-3">6</div>
  </div>
</div>

<div class="container mb-4">
  <h4> Full width without justify-content-center but container has max-width, resembling centered fully populated row </h4>
  <div class="row col-sm-12">
    <div class="col-3">1</div>
    <div class="col-3">2</div>
    <div class="col-3">3</div>
    <div class="col-3">4</div>
    <div class="col-3">5</div>
    <div class="col-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

Is there a way to obtain a comprehensive list of zip codes that are traversed by your route directions?

I have been searching through the Google Maps API (both Android and Web) but have not come across any references on how to retrieve a list of all the zip codes that are traversed by a given driving route. Could it be possible that I am missing something, ...

androidhtmlgoogle-mapsdriving-directions

The file path selected in Internet Explorer's open file dialog box is not retained

Currently, my Uploadify setup allows users to upload files by selecting them through the open file dialog. However, I've noticed that Internet Explorer does not store the path once a file is selected and uploaded. This means that every time a user wan ...

javascriptjqueryhtmlinternet-exploreruploadify

The identification of the field is not being transmitted by ng-select

Looking for help with Angular! I have an ng-select box where I can choose countries, and it's working fine when I select an option and submit - it submits the id as expected. However, when pre-populating the ng-select with data and submitting, it&apos ...

javascripthtmlangulartypescript

`Addressing issues with table cell layout for improved horizontal scrolling`

I am currently facing a challenge involving fixing the first and last column (.headcol, .lastcol) in a horizontally scrolling table, ensuring they always align to the left & right of the visible panel. My understanding was that position: absolute elements ...

css

reveal one div and conceal another using Bootstrap's collapse feature

I'm not sure why it's not working. Maybe I missed some simple thing? I want to show one div when I use an icon, then hide the other div. Currently, if I click on the first icon, a div will show. But if I click on the second icon, the div will sh ...

htmlcsstwitter-bootstrap

Conceal the div with ID "en" if the value matches $en

Looking for assistance with language settings on my page. I have a menu where I can select English, Croatian, or German. Below is the code to manage language changes: <?php class home_header_language { protected $_DBconn; ...

javascriptphpjqueryhidehtml

Is the height set to auto for the image stretching to equal the height of the PNG file?

.q-team-images { width: 6.4rem; height: auto; padding-bottom: 1rem; } Does the CSS styling mentioned above ensure that the image will adjust its height according to the height of its PNG file? ...

htmlcss

Assistance needed for adjusting margins and padding within the inner content box

I'm currently in the process of designing a new website layout using CSS, but I've encountered some challenges along the way. My main goal is to ensure that all elements stay within the boundaries of the browser window, with the scroll bar appear ...

htmlcss

Struggling to adjust the carousel selector to display images in the center, not off to the left

Encountering an issue with adjusting the carousel selector to showcase images in the center instead of on the left. The slides are functioning correctly, but the showcase item is not aligning properly. Here is a preview, thank you. <script src="htt ...

javascripthtmlcsswordpressslider

Is the media-heading situated at the base of the picture?

Wondering if it's possible to create a horizontal list of images with the image-heading under each image using Bootstrap 3. I couldn't find any information on this in the documentation. <h5 class="media-heading pull-left">One</h5> &l ...

csstwitter-bootstraptwitter-bootstrap-3

Enhance the bubble charts in Kendo UI Graph by adding dimension and depth to the bubbles for a more visually

Is there a way to create a relief effect on the bubbles in Kendo UI Bubble charts? Currently, all bubbles appear flat with the 15 provided themes. You can see an example here: It would be great to have a 3D-style option similar to the pie chart (Uniform s ...

csskendo-uitelerikstylesbubble-chart

Can JavaScript and CSS be used to dynamically style textarea content as it is being typed by the user?

I am wondering if it is possible to apply styling to content in a textarea as a user inputs text. For instance: <textarea>abcdefghijklmnopqrstuvwxyz</textarea> Is there a way to highlight all the vowels in the textarea string above using jav ...

javascriptjqueryhtmlcssforms

Capture a chart created with chart.js at full screen size across various window dimensions using html2canvas

I am trying to create a PDF featuring images generated by html2canvas. The main component on my webpage looks like this: https://i.sstatic.net/V7RVZ.jpg When I view the generated PDF in fullscreen mode, it appears as follows: https://i.sstatic.net/QW8Ct.j ...

javascripthtmlreactjschart.jshtml2canvas

What is the best way to make an HTML table with a static header and a scrollable body?

Is there a way to keep the table header fixed while allowing the table body to scroll in an HTML table? Any advice on how to achieve this would be greatly appreciated. Thanks in advance! ...

javascriptasp.netjqueryhtml

Switching Symbols with JQuery

Hello, I am brand new to utilizing javascript and I'm currently experimenting with the toggle function. My goal is to create show/hide functionality while also toggling arrow icons. Specifically, I want a right arrow next to the link "More -->" and ...

javascriptjqueryhtmlcss

What are some ways to implement CSS2 specifications in case CSS3 support is not detected by the browser?

I am currently working on a website using HTML5 and CSS3, but I also need it to be compatible with older browsers. Although I am using the Modernizr library, it does not allow me to replace certain CSS3 elements with CSS2 alternatives. For example, I have ...

htmlcss

Can Bootstrap 4 be integrated into a Next.js project simply by including a link to the stylesheet?

For a project I'm working on, I added Bootstrap to my header like this: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /> Everything was going smoothly until I decided to incorporate a carou ...

javascriptreactjsbootstrap-4next.js

Is there a way to adjust the container width to 1440px while also ensuring that the columns remain responsive with the help of Bootstrap 4 and SCSS?

Is there a way to customize the width of a container to 1440px while ensuring that the columns are still responsive? My project is built using Bootstrap 4 and SCSS. <div class="container"> <!-- Custom Container Width at 1440px--> ...

cssbootstrap-4sassresponsive-designgrid

Tips for implementing validators for both domestic and international phone numbers in Angular

Using the following code in a TS file, the first argument always works before the "||". However, only the regex needs to be manipulated. phoneNumber: ['', [Validators.required, Validators.pattern(('^[0]{1}[1-9]{9}$')||('^\&bs ...

htmlangular

Looking for assistance with regards to submitting an event

I have been working on developing a form and validating it using jQuery before submitting it to the server. Everything seems to be functioning correctly except for the function on the submit event. The form is being submitted with errors and upon checking ...

javascriptjqueryhtmlforms