Bootstrap 4: The `.flex-column` class is functioning correctly, however the `.justify-content-center` class is not working as intended

Currently, I am revisiting some older code and working on arranging the content properly on my webpage. However, I have encountered an issue: while my flex properties are functioning correctly, the '.justify-content-...' is not working as expected.

Below is a snippet of my code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<h3 class="titre-jumbotron-video text-center mb-2 mt-3">Parameters</h3>

<div class="max-min d-flex flex-column mt-1 mb-4 mx-auto" style="width: 95%">

<fieldset>

  <div class="row">
    
    <div class="col-4">
      <div class="d-flex flex-column justify-content-start">
        <div>
          <p>Some content</p>
        </div>
        <div>
          <label>Other type of content : </label>
          <input type="checkbox">
        </div>
      </div>
    </div>

    <div class="col-4">
      <div class="d-flex flex-column justify-content-center">
        <img id="apercuGraphe" src="https://i.kym-cdn.com/photos/images/newsfeed/001/504/739/5c0.jpg" alt="Apercu Graphe" width="200px">
      </div>
    </div>

    <div class="col-4">
      <div class="d-flex flex-column justify-content-end">
        <div>
          <label>Content 1 : </label>
          <input type="text">
        </div>
        <div>
          <label>Content 2 : </label>
          <input type="text">
        </div>
        <div>
          <label>Content 3 : </label>
          <select>
            <option value="auto">Automatic</option>
          </select>
        </div>
      </div>
    </div>

  </div>
</fieldset>

  </div>

It seems like there might be something that I am misunderstanding, but I'm unsure what it could be.

PS: Please expand the snippet to view it on a larger screen.

cssbootstrap-4

Answer №1

Have you considered using align-items-center and align-items-end for your layout needs?

Check out this helpful link for more information!

<div class="row">
    <div class="col-4">
      <div class="d-flex flex-column justify-content-start">
        <div>
          <p>Explore some interesting content</p>
        </div>
        <div>
          <label>Discover another type of content : </label>
          <input type="checkbox">
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="d-flex flex-column align-items-center justify-content-center">
        <img id="apercuGraphe" src="https://i.kym-cdn.com/photos/images/newsfeed/001/504/739/5c0.jpg" alt="Apercu Graphe" width="200px">
      </div>
    </div>
    <div class="col-4">
      <div class="d-flex flex-column align-items-end justify-content-end">
        <div>
          <label>Engage with Content 1 : </label>
          <input type="text">
        </div>
        <div>
          <label>Interact with Content 2 : </label>
          <input type="text">
        </div>
        <div>
          <label>Select Content 3 : </label>
          <select name="axeX" id="selectAxeX" class="select-no-ui">
            <option value="auto">Automatically Choose</option>
          </select>
        </div>
      </div>
    </div>
  </div>

Answer №2

There are three classes available: align-items-start, align-items-center, and align-items-end.

As the names imply, these classes dictate how alignment is applied to elements. Familiarize yourself with how each of these classes functions.

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

Firefox failing to display fonts from Google Font API

The landing page our company outsourced does not display the Lato font in Firefox, resorting to a different option instead. We have received a stylesheet from fonts.googleapis.com that includes the following: @font-face { font-family: 'Lato'; ...

cssfirefoxfont-facenoscriptgoogle-font-api

Could not locate the CSS file within the HTML document (404)

I've searched high and low on YouTube but can't seem to find a solution to this problem. Every time I run the code, it gives me an error message saying GET net::ERR_ABORTED 404 (NOT FOUND) <html> <head> <title>itays websit ...

htmlcss

Ensure that the height of the content in JQuery Mobile is set to 100

I'm currently working on an app using JQuery Mobile. Check out this link for my HTML code. There's a full-screen <iframe> within my page. Even though I've specified width:100%; height:100%; border:0% for the iframe, it ends up being ...

htmlcssjquery-mobile

Steps to create a styled text area in your code

Hello everyone, I am currently working on an application where the admin can input text into a text area, which will then be displayed to the logged-in users. My issue is that if the admin copies code from editors like Eclipse or IntelliJ IDE, I want t ...

csshtml

How to upload a file to Gmail using HTML and Javascript

Learn how to utilize the mailto: protocol for attaching a file Visit this link for more information function sendMail() { var link = "mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b8b095b0adb4b8a5b9b0fbb6bab ...

javascripthtmlcss

Creating an image slider that pauses on mouse hover

Here is a code snippet that I'd like to share <body> <div id="slideshow"> <div> <img src="assets/images/home-banner.jpg" width="995" height="421" alt=""/> </div> <div&g ...

jqueryhtmlcss

Setting up breakpoints for nested rows in Bootstrap can be achieved by utilizing the responsive

Currently, I am in the process of learning how to create a responsive website. One thing that has me puzzled is how to set the breakpoints for the content when the screen size changes. Here is what I am aiming to achieve: https://i.sstatic.net/DeyD0.png ...

htmlcssbootstrap-4responsive-designfrontend

Ways to adjust the size of a container to perfectly match the width of its child elements

My challenge involves two squares in a container that overlap using transform: translate. I am seeking to eliminate the padding to the right of the blue square so that the container perfectly accommodates the width of the children. View the image for clari ...

htmlcss

Utilize CSS styling for elements persistently, even following a postback event triggered by

In my asp.net app, I have multiple hrefs with dynamic Ids that all share the same CssClass called MyClass. I am looking to hide these buttons based on a certain condition. Initially, I used the .ready function: $(document).ready(function() { if(condit ...

asp.netjquerycss

I completed the footer on my website, but as I zoom in on the page, everything becomes jumbled and overlapped

Hey there, I'm currently dipping my toes into the world of HTML and CSS with hopes of creating a visually appealing website. Everything was going smoothly until I reached the footer section. At first glance, it looked perfect but upon zooming in, all ...

htmlcss

CSS3 columns causing <li>s to be cropped

I'm attempting to implement css3 columns with a list (<li>), but I'm running into some issues getting it to function properly. I have wrapped the <ul> in a div like this: .ul-container { -moz-column-width: 310px; -moz-column-gap ...

htmlcssmultiple-columns

Tips for incorporating a responsive width feature into the Drawer component in MUI v5

I'm currently working with Material UI v5 and facing a challenge in creating a responsive drawer. I want the drawer to occupy 100% of the screen width on smaller devices, while taking up only 1/3 of the screen width on larger devices. Unfortunately, I ...

cssreactjsmaterial-ui

HTML <section> Order Placement

I am currently facing an issue with the placement of two divs on my html page. I have a navigation bar and another content div, but they are not appearing in the right order. This is how my html structure looks: <html> <body> <div id="navig ...

htmlcss

Getting two <div> elements to float below one another can be achieved by utilizing the CSS property "float

Can someone please tell me the trick to floating one element below another on the same side? I want them both to float but be positioned under each other. Thank you in advance. ...

htmlcssweb

Is it possible to customize bootstrap classes for a unique bootstrap css design?

In my MVC4 project, I faced a situation where I had a global.css class with some classes that conflicted with Bootstrap after adding it. To resolve this, I created a new file called bootstrap_migration.css. In this file, I prefixed the Bootstrap classes wi ...

htmlcssasp.net-mvc-4twitter-bootstrap

I want the hover effect to trigger specifically when I hover over the image within a column of a row using CSS

My issue lies with the hover effect on my webpage. Currently, the problem I am facing is that the hover effect activates whenever my mouse hovers over any part of the column in a row. How can I make it so that the effect only triggers when hovering over th ...

cssbootstrap-4jsx

How can I remove the unsightly scrollbar caused by overflow: auto?

I've encountered a problem while working on my website. The inner div #content wasn't expanding to the full size of the page, causing the text to overflow messily over the background image and making it difficult to read. I initially used overflo ...

htmlcssoverflow

Is it possible to detect text overflows in HTML using only CSS?

Is there a way in 2013 to use CSS to detect and respond to text overflowing an HTML element? I've read about using JavaScript for this, but I'm curious if the CSS spec offers a solution. For example, having a fixed size div like this: <div c ...

htmlcssoverflowselectorspecifications

Enhance your React project by incorporating Material-UI card media elements with the ability to add

I am trying to figure out how to create an opaque colored overlay on top of an image using Material-UI. While it is possible with plain HTML, CSS, and JavaScript, I am facing some challenges with Material-UI. <Card> <CardMedia> <im ...

javascripthtmlcssreactjsmaterial-ui

Issue with CSS wrapper background not displaying

I am currently working with a layout that looks like this: <div class="contentWrapper"> <div class="left_side"></div> <div class="right_side"></div> </div> The contentWrapper class is styled as follows: .contentWrappe ...

cssbackgroundcss-float