Alignment issue with content within bootstrap grid

.course-card{
  background: white;
  border-radius: 0.25rem;
  padding: 1rem 1rem 1rem 1rem;
  text-align: center;
}
<div class="row d-flex align-items-center course-card">
  <div class="col-md-6 course-progress">
    <p>test</p>
  </div>
  <div class="col-md-6 course-info">
    <div id="div2-1 course-name">
      <p>test</p>
    </div>
    <div id="div2-2 course-button">
      <p>test</p>
    </div>
  </div>
</div>

View My Outcome

Desired Outcome

I am attempting to align my content in bootstrap, however, despite adding d-flex align-items-center, the content remains misaligned. As illustrated in the image, it is not centered properly and there is more space at the bottom than expected.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

When you add the class d-flex align-items-center, it may not have any immediate effect. Without seeing the rest of your CSS, it's hard to determine the purpose of that code.

Here's a suggestion to try:

div {
  display: flex;
  outline: 1px dashed blue;
  justify-content: space-evenly;
  flex-grow: 1;
  text-align: center;
}

p {
  align-self: center;
}
<div style="width: 300px; height: 150px;">
  <div style="flex-direction: row;">
    <div>
      <p>test</p>
    </div>
    <div style="flex-direction: column">
      <div>
        <p>test</p>
      </div>
      <div>
        <p>test</p>
      </div>
    </div>
  </div>

To visualize the positioning of elements, you can use the blue dashed outline around each div.

Your divs are correctly aligned, but the text inside the p tags may not be vertically spaced as desired. In the example provided, the p elements are centered vertically using align-self: center, which may resolve the spacing issue you're experiencing.

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

using http to handle a 404 error

This specific function is designed to fetch data under normal circumstances and to return a value of 0 in the event of a 404 error. function retrieveData(url) { if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); ...

javascripthtmlajaxget

Interacting with an iframe element using Selenium in Python

I have a webpage with an iframe embedded, and I'm using Selenium for test automation: <iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0" style="dis ...

javascriptpythonhtmlseleniumiframe

How come the pop-up isn't displaying in the middle of the screen?

I have encountered a positioning issue while using a semantic modal with Angular. The problem arises when I try to display the modal as it does not appear in the correct position. https://i.sstatic.net/o033E.png Below is the code snippet from my HTML fil ...

javascripthtmlangularjssemantic-ui

Does jQuery's click event not successfully hide an element on Internet Explorer?

In my dropdown menu, I have the following options: <div class="my_div"> <select name="selection" id="select_id"> <option value="0">A</option> <option value="5">B</option> ...

jqueryhtmlcss

Move your cursor over a div element while utilizing NgClass

I'm currently working on implementing a hover effect on a div using an Angular ngClass directive. Within the template file, I have a div element with the class "list-item-container" that includes another div with the class "list-item." This "list-item ...

htmlcssangularng-class

Is it possible to send a copy to the sender using a MailTo link?

We have created a simple form that generates an email to submit support tickets. Currently, the emails are sent to our "support staff," but we want to also send a copy to the sender. We are using mailto links. Is there a way to accomplish this? For instan ...

htmlmailtosender

Adjusting color with the .on method in Event Listener

What's wrong with this code? html <!DOCTYPE html> <html> <head> <title>Ending Project</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> &l ...

javascripthtmljqueryjquery-events

What is the best way to display an image and text side by side within a single row in react-table?

I am trying to display an image and text side by side within a single column in a React table. I have successfully added two texts together in a single column using the code below: Header: "Name", id: "User", accessor: (d) => ...

javascripthtmlreactjsnext.jsreact-table

The button can only be edited using Internet Explorer

My webpage features a button that displays correctly in Chrome, but the text inside the button gets cut off when viewed in IE (see image). Can you provide guidance on what might be causing this issue and how to resolve it? Bootstrap version 4.0.0 is also b ...

cssinternet-explorercross-browserbootstrap-4

If additional content has been included in the `div`, be sure to scroll all the way down to view it

I have a div that needs to automatically scroll to the bottom when new content is added. This is a common feature in chat applications where the user wants to see the latest messages without having to manually scroll down each time. How can I achieve this ...

javascripthtmlcss

Guide to creating a rising or waving effect for text using CSS or JavaScript without the need for animation

Is there a way to style dynamic text like this using HTML? https://i.sstatic.net/NQ9Cs.jpg I'm open to using CSS or Javascript, as long as it does not involve animation. ...

javascripthtmlcss

Modify the HTML select tag to toggle from a selected checkbox

What should I do when a certain option is checked in the checkbox, and that label needs to be shown in the select tag? https://i.stack.imgur.com/ZxRNF.png Checkbox input <input type="checkbox" class="toggle-product pull-right" @if(!isset($restrictedPr ...

javascriptphpjqueryhtmllaravel

Having Trouble with Form Submission Button Across Different Web Browsers

Having some trouble with my form - all fields are properly closed with tags, but when I click the submit button, nothing happens. The page is loaded with code, so here's the link for you to check it out. Unfortunately, right-click is disabled, so ple ...

phpjavascripthtml

Issues with Node JS app's handling of php mailer code

I've made a basic website using the Node JS framework and included a php mailer for handling the contact form. Unfortunately, I'm facing issues getting it to function properly. Could it be possible that there is an underlying problem with Node JS ...

javascriptphphtmlnode.jsphpmailer

Deleting content in a text area when specific text is entered

Is there a way to clear the textarea value if I type in <br>? The code I have right now is shown below. I understand that this may seem like an odd request, but I am experimenting with a typing effect. function eraseText() { document.getElemen ...

javascripthtml

Curves are unable to form on borders using the border-radius property

While working on a webpage, I encountered an issue with CSS attributes and table borders. Despite using the border-radius attribute, the border didn't round along with the background; it just stayed at a corner. Below is my code snippet, any help is g ...

htmlcsshtml-table

How come my countdown application functions properly when accessed through the browser via the HTML page, but encounters issues when utilized with an HTTP server?

I have encountered an issue where the app functions correctly when I open the HTML file in my browser, but fails to load the CSS and JavaScript when accessing it through localhost:3000. HTML: <html> <head> <link href="./main.css" rel="st ...

javascriptjqueryhtmlcss

Simultaneous activation of CSS classes by multiple RouterLinkActive components

Using multiple <a> tags with routerLink presents a unique behavior. Upon loading the home page, the home icon in aMenuItems is correctly given the active class through routerLinkActive, while the remaining elements in the array do not have this class ...

htmlcssrouter

Tips for inserting HTML content into a Flex TextArea

There was once a panel where I had added a fadeIn show effect. Initially, the effect only applied to the panel itself, with text appearing without the desired fadeIn effect. Fortunately, a colleague suggested embedding the fonts, which miraculously solved ...

htmlxmltextareaflex3embedding

The absence of image input was evident in the POST request

Within my Django template, I have an input field linked to a Django ImageField. Once rendered, the HTML code appears as follows: <form action="/accounts/username/" method="post" id="profile_form" enctype="multipart/form-data"> &l ...

htmldjangopostdjango-templates