Is there a way to left-align these items?

I currently have 10 divs arranged side by side. I am trying to align the last divs to the left instead of center, but the solutions I found so far are not working. I've checked Bootstrap's documentation and tried using 

<div class="d-flex flex-wrap">
, but it didn't produce the desired result. I also looked at a similar question on Stack Overflow from 2016 that suggested using float: left, but I'm wondering if there is a more up-to-date method to achieve this with Bootstrap 4.

This is the current setup: https://i.sstatic.net/o5QJv.png

.briones-project-row {
  margin-bottom: 2em;
}

.briones-project-card {
  background-color: #ffffff;
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
  -webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
  -moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
  margin-bottom: 3em;
}

.briones-project-card .main-image {
  padding: 0;
}

.briones-project-card .main-image img {
  width: 100%;
}

.briones-project-card .main-image img:hover {
  opacity: 0.8;
}

.briones-project-card .card-content {
  text-align: center;
}

.briones-project-card .card-content .project-name {
  font-weight: 600;
  color: #2d2d2d;
  margin-top: 0.9em;
  margin-bottom: 0.7em;
  line-height: 1.3em;
  min-height: 40px;
  max-height: 40px;
}

.briones-project-card .card-content .project-detail {
  font-weight: 400;
  color: #737373;
  line-height: 1.3em;
}

.briones-project-card .bottom-line {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 6px;
  background-color: #DA3D0D;
}

...
</div>
      <!-- /10 -->

    </div>
  </div>
</div>

Aligning last div elements

htmlcss

Answer №1

Adjust the container to have justify-content: flex-start and eliminate the mx-auto property, as it is causing the content to be centered in a flex layout:

.briones-project-row {
  margin-bottom: 2em;
  justify-content: flex-start; /* consider using a utility class for this */
}

.briones-project-card {
  background-color: #ffffff;
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
  -webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
  -moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
  margin-bottom: 3em;
}

/* Remaining CSS properties unchanged */


<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="66040909121512140716265248504856">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-12">

    <!-- /Row One -->
    <div class="row briones-project-row">

      <!-- Project Cards -->
      
    </div>
  </div>
</div>

Answer №2

  1. delete mx-auto from the 9th card.
  2. replace mx-auto with me-auto in the 10th card.

.briones-project-row {
  margin-bottom: 2em;
}

.briones-project-card {
  background-color: #ffffff;
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
  -webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
  -moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
  margin-bottom: 3em;
}

.briones-project-card .main-image {
  padding: 0;
}

.briones-project-card .main-image img {
  width: 100%;
}

.briones-project-card .main-image img:hover {
  opacity: 0.8;
}

.briones-project-card .card-content {
  text-align: center;
}

.briones-project-card .card-content .project-name {
  font-weight: 600;
  color: #2d2d2d;
  margin-top: 0.9em;
  margin-bottom: 0.7em;
  line-height: 1.3em;
  min-height: 40px;
  max-height: 40px;
}

.briones-project-card .card-content .project-detail {
  font-weight: 400;
  color: #737373;
  line-height: 1.3em;
}

.briones-project-card .bottom-line {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 6px;
  background-color: #DA3D0D;
}

.briones-primary-btn-container {
  margin-top: 2em;
}

.briones-primary-btn {
  background-color: #DA3D0D;
  color: #ffffff;
  font-weight: 400;
  border: none;
  border-radius: 0;
  padding: 0.5em 3em;
}

.briones-primary-btn:hover {
  background-color: #232323;
  color: #ffffff;
}
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3f3232292e292f3c2d1d69736b736d">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-12">

    <!-- /Row One -->
    <div class="row briones-project-row">

      <!-- 01 -->
      <div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
        <div class="col-lg-12 briones-project-card">
          <div class="row">
            <a href="#" class="col-lg-12 main-image text-center">
              <img src="images/don-pedro-limache-thumbnail.jpg" alt="Project Image" class="img-fluid">
            </a>
          </div>
          <div class="row">
            <div class="col-lg-12 card-content">
              <p class="project-name">Don Pedro de Limache</p>
              <p class="project-detail">Project Location <br/> Xm2 | X days</p>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-12 bottom-line"></div>
          </div>
        </div>
      </div>
      <!-- /01 -->

      <!-- 02 -->
      <div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
        <div class="col-lg-12 briones-project-card">
          <div class="row">
            <a href="#" class="col-lg-12 main-image text-center">
              <img src="images/dona-barbara-casablanca-thumbnail.jpg" alt="Project Image" class="img-fluid">
            </a>
          </div>
          <div class="row">
            <div class="col-lg-12 card-content">
              <p class="project-name">Doña Bárbara de Casablanca</p>
              <p class="project-detail">Project Location <br/> Xm2 | X days</p>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-12 bottom-line"></div>
          </div>
        </div>
      </div>
      <!-- /02 -->

      <!-- 03 -->
      <div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
        <div class="col-lg-12 briones-project-card">
          <div class="row">
            <a href="#" class="col-lg-12 main-image text-center">
              <img src="images/ayelen-oriente-quillota-thumbnail.jpg" alt="Project Image" class="img-fluid">
            </a>
          </div>
          <div class="row">
            <div class="col-lg-12 card-content">
              <p class="project-name">Ayelen Oriente de Quilota</p>
              <p class="project-detail">Project Location <br/> Xm2 | X days</p>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-12 bottom-line"></div>
          </div>
        </div>
      </div>
      <!-- /03 -->

      <!-- 04 -->
      <div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
        <div class="col-lg-12 briones-project-card">
          <div class="row">
            <a href="#" class="col-lg-12 main-image text-center">
              <img src="images/rey-felipe-casablanca-thumbnail.jpg" alt="Project Image" class="img-fluid">
            </a>
          </div>
          <div class="row">
            <div class="col-lg-12 card-content">
              <p class="project-name">Rey Felipe de Casablanca</p>
              <p class="project-detail">Project Location <br/> Xm2 | X days</p>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-12 bottom-line"></div>
          </div>
        </div>
      </div>
      <!-- /04 -->

      <!-- 05 -->
      <div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
        <div class="col-lg-12 briones-project-card">
          <div class="row">
            <a href="#" class="col-lg-12 main-image text-center">
              <img src="images/ayelen-poniente-quillota-thumbnail.jpg" alt="Project Image" class="img-fluid">
            </a>
          </div>
          <div class="row">
            <div class="col-lg-12 card-content">
              <p class="project-name">Ayelen Poniente de Quillota</p>
              <p class="project-detail">Project Location <br/> Xm2 | X days</p>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-12 bottom-line"></div>
          </div>
        </div>
      </div>
      <!-- /05 -->

      <!-- 06 -->
      <div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
        <div class="col-lg-12 briones-project-card">
          <div class="row">
            <a href="#" class="col-lg-12 main-image text-center">
              <img src="images/esmeralda-de-limache-thumbnail.jpg" alt="Project Image" class="img-fluid">
            </a>
          </div>
          <div class="row">
            <div class="col-lg-12 card-content">
              <p class="project-name">Esmeralda de Limache</p>
              <p class="project-detail">Project Location <br/> Xm2 | X days</p>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-12 bottom-line"></div>
          </div>
        </div>
      </div>
      <!-- /06 -->

      <!-- 07 -->
      <div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
        <div class="col-lg-12 briones-project-card">
          <div class="row">
            <a href="#" class="col-lg-12 main-image text-center">
              <img src="images/paqari-de-villa-alemana-thumbnail.jpg" alt="Project Image" class="img-fluid">
            </a>
          </div>
          <div class="row">
            <div class="col-lg-12 card-content">
              <p class="project-name">Paqari de Villa Alemana</p>
              <p class="project-detail">Project Location <br/> Xm2 | X days</p>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-12 bottom-line"></div>
          </div>
        </div>
      </div>
      <!-- /07 -->

      <!-- 08 -->
      <div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
        <div class="col-lg-12 briones-project-card">
          <div class="row">
            <a href="#" class="col-lg-12 main-image text-center">
              <img src="images/lobelias-de-placilla-de-penuelas-thumbnail.jpg" alt="Project Image" class="img-fluid">
            </a>
          </div>
          <div class="row">
            <div class="col-lg-12 card-content">
              <p class="project-name">Las Lobelias de Placilla de Peñuelas</p>
              <p class="project-detail">Project Location <br/> Xm2 | X days</p>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-12 bottom-line"></div>
          </div>
        </div>
      </div>
      <!-- /08 -->

      <!-- 09 -->
      <div class="col-lg-3 col-md-3 col-sm-6 col-11">
        <div class="col-lg-12 briones-project-card">
          <div class="row">
            <a href="#" class="col-lg-12 main-image text-center">
              <img src="images/aliwen-quillota-thumbnail.jpg" alt="Project Image" class="img-fluid">
            </a>
          </div>
          <div class="row">
            <div class="col-lg-12 card-content">
              <p class="project-name">Aliwen de Quillota</p>
              <p class="project-detail">Project Location <br/> Xm2 | X days</p>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-12 bottom-line"></div>
          </div>
        </div>
      </div>
      <!-- /09 -->

      <!-- 10 -->
      <div class="col-lg-3 col-md-3 col-sm-6 col-11 me-auto">
        <div class="col-lg-12 briones-project-card">
          <div class="row">
            <a href="#" class="col-lg-12 main-image text-center">
              <img src="images/alicura-penablanca-thumbnail.jpg" alt="Project Image" class="img-fluid">
            </a>
          </div>
          <div class="row">
            <div class="col-lg-12 card-content">
              <p class="project-name">Alicura de Peñablanca</p>
              <p class="project-detail">Project Location <br/> Xm2 | X days</p>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-12 bottom-line"></div>
          </div>
        </div>
      </div>
      <!-- /10 -->

    </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

How can I customize the visibility toggles for the password input field in Angular Material?

Currently immersed in the Angular 15 migration process... Today, I encountered an issue with a password input that displays two eyes the first time something is entered in the field. The HTML code for this is as follows: <mat-form-field appearance=&qu ...

javascriptcssangulartypescriptangular-material

Unable to interpret data from the API

{ id: 8, customerName: "xyz", customerMobileNumber: "123456789", customerBillingAddress: "xyz address", customerShippingAddress: "xyz address", customerProductPurchasedDate: "2021-11-09T09:07:00.000Z", cust ...

javascripthtmlcssmysqlreactjs

Adding items to a jCarousel using C# programming language is a simple process that involves following

I am struggling to display images in jcarousel using a C# Webmethod and jQuery Ajax. Here is my setup: My HTML structure: <div> <ul id="mycarousel" class="jcarousel-skin-tango" style="float: left"> </ul> </div ...

c#jqueryhtmljcarousel

"Change the value of a style setting in React to 'unset

One of the components has CSS properties such as `right` and `bottom` that are set with a classname. I tried to override these values using the `style` prop but have only been successful in setting numerical values like `10px` or `0px`, not `unset`. Wha ...

javascripthtmlcssreactjs

Remove the source code upon accessing the inspector tool

I recently encountered a page with encrypted source code. The content is being loaded from two separate sources stored in JavaScript files. My question is: Is it feasible to completely remove the HTML source code when a user opens the inspector (F12, etc ...

htmldomblocksource-code-protection

Error message: The function Vue.use is not being caught as a TypeError

Recently, I've started learning VueJS and now I'm attempting to swap out the <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89fffcecc9bba7bf">[email protected] ...

htmlvue.jsvuejs3vue-composition-api

Steps for modifying the width of a horizontal line element so that it aligns with an input element

I'm attempting to dynamically adjust the hr element's length based on the length of the input element by using CSS. Additionally, I'd like to incorporate an animation that triggers when the input is focused. I came across a solution for th ...

htmlcss

Styling an input button to look like a link in Firefox and Internet Explorer

I'm currently using CSS to give my input button the appearance of a link. Here's how I've styled it: input#linkLike { background: none; border: none; cursor: pointer; margin: 0; padding: 0; text-decoration: none; ...

htmlcssfirefox

Switch between showing and hiding a div by clicking on the panel header and changing the symbol from + to

I need assistance with a panel feature on my website. The panel should expand when the "+" symbol is clicked, displaying the panel body, and the "+" symbol should change to "-" indicating it can be collapsed by clicking it again. There is a slight twist t ...

javascriptjqueryhtmlcss

Customize the color of Bootstrap active tabs to have a unique and distinct hue for each tab

I have successfully managed to change the color of both active and non-active tabs as a group, but I am wondering if it is possible for the color to remain the same when moving to the next tab. Here is what I've tried: http://jsfiddle.net/pThn6/2031/ ...

jqueryhtmlcsstwitter-bootstraptabs

The content's div is not extending completely in the horizontal direction

Just starting out with tailwind CSS and struggling a bit with the design aspect due to my lack of CSS skills. Need some assistance troubleshooting my layout, particularly in making sure the div container stretches to fit the screen size properly. The spec ...

cssreactjsnext.jstailwind-css

"Ensure only one checkbox is selected at a time by unchecking the previous

Hi, I'm facing two issues with the code below. The first problem is that when I select checkbox number 3, it automatically selects number 2 as well. I only want this to happen if I manually check it (similar to checkbox number 2). The second issue i ...

javascripthtml

Angular and JS do not have the functionality to toggle the split button

I have a question that seems similar to others I've seen, but I haven't found a solution yet. Can someone please review my code? In the component, I have {{$ctrl.init}} and {{$ctrl.people}} assigned. I am sure this assignment is correct because ...

javascripthtmlangularjs

Slanted background div that adjusts to the screen size

I'm struggling to create a slanted angle div that remains responsive as the screen size changes. Unfortunately, my current layout breaks completely when the screen gets bigger. If you'd like to take a look at what I've been working on so fa ...

css

Locate a specific element by utilizing xpath

Recently, I encountered a coding issue that has been puzzling me. Here's the html snippet in question: <div class="Main"> <div> <div class="display">First:</div> <div class="price">$0.01</div> ...

javahtmlseleniumxpath

Nest two div elements within a parent div with varying margins

When trying to nest two divs inside another div with different margins, the second one always aligns according to the first one. For example, if we have divs named 'first' and 'second', we might want a layout like this: seco ...

htmlcss

Ways to differentiate between buttons in a button cluster?

I have created a set of 3 buttons using the code from this resource. However, the buttons are currently positioned vertically close to each other as shown in the source code. I would like to adjust the spacing between them. Is there a way to achieve this ...

htmlcss

Hide the overlay fullscreen menu upon clicking an anchor link

I'm having trouble with Javascript, but some of you might find this easy. I found a fullscreen overlay menu on Codepen and I'm trying to figure out how to close it when clicking an anchor link. Looking for assistance with adding javascript to c ...

javascripthtmlcssanchoroverlay

What is the best way to display Bootstrap dynamic tabs in a single row without them overflowing and requiring a scroll button to access all the tabs

Is there a way to dynamically display Bootstrap tabs? I want the content in the tab to show when the link is clicked, and also have a close button. I need the tabs to be aligned in a single row without wrapping down if they don't fit. Here's an ...

jquerycsstwitter-bootstrap

The parent and child elements both attempted to define the background color, but neither was successful in applying it

Here is the html code snippet: body { font-family: Arial, Helvetica, sans-serif; } header { background-color: rgb(93, 43, 78); background-image: -webkit-linear-gradient(right, rgb(93, 43, 78 ...

htmlcssbackground-imagebackground-color