What could be the reason why my content is not aligning at the center in a Bootstrap flex grid?

Just getting started with Bootstrap and struggling with grid layout...

Seems like I can't figure out how to center the content in the left column, despite trying different approaches with flex elements.

Here's my latest code snippet:

.eh-height-nav {
  background-color: blueviolet;
  height: 150px;
}

.eh-intro-height0 {
  background-color: rgb(173, 134, 209);
  height: 100vh;
  color: rgb(255, 255, 255);
}

.eh-intro {
  width: 100%;
  height: 90vh;
}

.eh-intro-img {
  background-color: rgb(34, 10, 10);
  height: 300px;
  width: 300px;
  color: blanchedalmond;
}

.eh-intro-columns {
  width: 100%
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af8f5f5eee9eee8fbeadaafb4abb4aa">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<div class="container-fluid eh-intro-height0 d-flex align-items-center ">
  <div class="d-flex eh-intro-columns justify-items-center align-items-center">
    <div class="eh-intro border mx-4 ">
      <div class="">
        <div class="col ">
          <div class="eh-intro-img"></div>
        </div>
      </div>
    </div>
    <div class="eh-intro border mx-4">
      Content Img
    </div>
  </div>
</div>

htmlcssbootstrap-5

Answer №1

I'm not very experienced with bootstrap, so forgive me if this isn't the right solution. However, I tried to assist by adding display: flex to your eh-intro class and adjusting the margin on eh-intro-img to margin: auto. This should help center the content similar to the image displayed. Please note that it may not scale perfectly due to the fixed width and height settings. You may need to view in 'full page' mode for a better preview.

.eh-height-nav {
  background-color: blueviolet;
  height: 150px;
}

.eh-intro-height0 {
  background-color: rgb(173, 134, 209);
  height: 100vh;
  color: rgb(255, 255, 255);
}

.eh-intro {
  width: 100%;
  height: 90vh;
  display: flex;
}

.eh-intro-img {
  margin: auto;
  background-color: rgb(34, 10, 10);
  height: 300px;
  width: 300px;
  color: blanchedalmond;
}

.eh-intro-columns {
  width: 100%
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a1815150e090e081b0a3a4f544b544a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">    
    
    <div class="container-fluid eh-intro-height0 d-flex align-items-center ">
      <div class="d-flex eh-intro-columns justify-items-center align-items-center">
        <div class="eh-intro border mx-4 ">
              <div class="eh-intro-img"></div>
        </div>
        <div class="eh-intro border mx-4">
          Content Img
        </div>
      </div>
    </div>

Answer №2

Based on your advice, I went ahead and incorporated some background elements while also attempting to streamline the design. https://i.sstatic.net/9NKli.png

I am still puzzled by the way the "align-items-center" class functions on line 16. It seems that on line 13, this class aligns child elements with a "col" class to the vertical center of the parent.

In addition, I had assumed that by default, a child element of a container with a "d-flex" class should expand to match the height of its parent.

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

PHP mistakenly outputs content that is not enclosed within tags

After discovering StackOverflow, I couldn't resist sharing my PHP code conundrum with the incredible community here! So, in a WordPress template, I have this chunk of PHP: echo '<div class="thumbnail">'; echo the_post_thumbnail(); ec ...

phpjqueryhtmlcsswordpress

I am currently working on a project using ar.js

I came across a glitch code that triggers a video when scanning the marker. However, I encountered an issue where it only works on desktop. On Chrome for Android, the video does not appear, only the sound can be heard. I need assistance as my coding knowle ...

javascripthtmlthree.jsaframear.js

Optimal method for identifying all inputs resembling text

I'm in the process of implementing keyboard shortcuts on a webpage, but I seem to be encountering a persistent bug. It is essential that keyboard shortcuts do not get activated while the user is typing in a text-like input field. The approach for hand ...

javascriptjqueryhtml

How to retrieve a variable from an object within an array using AngularJS code

I recently started learning TypeScript and AngularJS, and I've created a new class like the following: [*.ts] export class Test{ test: string; constructor(foo: string){ this.test = foo; } } Now, I want to create multiple in ...

javascripthtmlarraysangulartypescript

Issue with fetching API data and sending it to the Node server

My node backend is all set up and running smoothly for GET requests, but I'm facing an issue with POST requests as the data doesn't seem to be getting sent to the backend. Here's the code snippet: fetch("http://localhost:3000/", ...

javascripthtmlnode.jspostfetch-api

Fixed header in a div, allowing content to scroll when hovering over the header

How can I ensure that the header remains fixed at the top while allowing the content to scroll when hovered over? The current issue is that when a user hovers over the header and tries to scroll, the content does not move. body { margin: 0; ...

htmlcssvue.jssass

Guide to adjusting the number of bounces using jQuery's User Interface (UI)

Check out my code on CodePen: http://codepen.io/Chiz/pen/jbwPLO (click anywhere in the blank area) I'm trying to figure out how to adjust the number of bounces a div makes before stopping. For example, I want the div to bounce 10 times and also chang ...

jqueryhtmlcssjquery-animate

Updating inner text content dynamically can be accomplished without relying on the use of the eval() function

I am faced with a situation where I have multiple batches of code structured like this: 1 <div id="backgrounds" class="centery">Backgrounds 2 <div id="bk1" class="attr">Background 1 3 <div class="container"> 4 ...

javascripthtml

How can I navigate to a specific section within a Bootstrap modal without being redirected back to the origin of the modal?

Currently in the process of creating a basic front end website with Bootstrap for styling. One section I've developed includes modals, where users click a button to open a centrally located modal window. Desired Functionality I aim to enable users t ...

htmljquerycsstwitter-bootstrapbootstrap-4

What could be causing my divs to collide with each other in a Javascript environment?

As you may be aware, my current task involves assigning random positions from a list to various div elements. The code I am using to achieve this is as follows: var list = [100,210,320,430]; var square1 = document.getElementById("square1") var sq ...

javascripthtmlcssrandomposition

Autofill Dropdown in AngularJS Using Data from Previous Page

Despite searching extensively on StackOverFlow, I was unable to find the answer I needed. So, I am posting my question below. I have a form that includes a dropdown menu. When a user clicks a button, they are taken to a new HTML page with additional infor ...

javascripthtmlangularjs

How to Transform a Navigation Bar into a Carousel

I am creating a website that is designed to be responsive. Currently, I have a horizontal navigation bar which collapses into a drop-down menu when the screen size decreases. When each tag in the menu is clicked, a different image loads into a designated ...

jqueryhtmlcss

How to make the Bootstrap mobile navigation menu taller?

I'm having trouble adjusting the height of the collapsed mobile drop-down navigation. Right now, it's stuck at around 340px and I need it to expand to accommodate all the menu items within the collapsed nav. Despite my efforts searching on Google ...

htmlcsstwitter-bootstrap

Which is the better option for opening a link in a button: using onclick or href?

What is the most effective way to open a link using a button? <button type="button" onclick="location='permalink.php'">Permalink</button> <button type="button" href="index.php">Permalink</button> ...

javascripthtmlcss

Utilize the input type=date value in the date function to obtain a specific format

How can I pass the value of input type=date to a JavaScript date function? In my HTML code, I have used: <input type=date ng-model="dueDate"> <input type="time" ng-model="dueTime"> <button class="button button-block" ng-click="upload_dueda ...

javascriptsqlangularjshtml

Unable to assign a basic HTML class to a Blazor component

Upon attempting to implement the following code in my .NET 5 Blazor project within a .razor file: <SignedLabel class="some-css-class" Price=123 Currency=Currency.Usd /> I encountered an issue where Blazor interpreted the class attribute as ...

htmlrazorblazor

How to Align a Footer to the Bottom of the Page using Bootstrap 5

My issue arises when using a dark background footer, as some pages lack enough content to fill the entire browser's viewport. Consequently, an unsightly white band appears below it. How can I ensure the footer reaches the bottom of the viewport on pa ...

htmlcssbootstrap-5

Arrange blocks within bootstrap columns using grid css

I have a layout with two columns, each containing two blocks Currently, the mobile order is: 1 2 3 4 But I want it to be: 3 1 2 4 I attempted to use CSS grid but I am unsure how to move block 3 out of column 2. Here's the code snippet: body { ...

cssbootstrap-4css-grid

Automated vertical alignment of rows within the Bootstrap table

I'm currently working on a table for my personal project that populates with data from the database. I am trying to get the rows to display vertically under headings (see screenshot at the bottom of this question). I have attempted various solutions f ...

javascripthtmlcssejsbootstrap-5

Splitting the text vertically by utilizing a single DOM element

I am searching for a way to split my text vertically, with line breaks so that only one word should be present on each line. Currently, I have achieved this by using separate DIV elements for each word. Is it possible to accomplish the same layout using ...

htmlcss