How to align text in the center of a card using Angular Bootstrap

I have a column div that I need to center the text in

Here is my code:


            <div class="card mb-4">
              <div class="card-header">
                <div class="card-title-wrap bar-info">
                  <div class="card-title">Personal Information</div>
                </div>
              </div>
              ... (Code continues)

Currently, it looks like this:

https://i.sstatic.net/jlx8z.png

The issue is that I need to center the ID and AGE Text in the middle of my card. They are aligned to the left now, but I want them centered. I have tried using text-align: center, but it's not working.

cssangularbootstrap-4

Answer №1

.mid-aligned {
    width: 100%;
    display: flex;
    justify-content: center;
}

Make sure to place your content inside a div with the specified class.

Answer №2

Check out this revised code. I've cleaned up some unnecessary HTML.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class="card mb-4">
              <div class="card-header">
                <div class="card-title-wrap bar-info">
                  <div class="card-title">Personal Information</div>
                </div>
              </div>
              <div class="card-body">
                <div class="card-block">
                  <div class="align-self-center halfway-fab text-center">
                    <a class="profile-image">
                      <img src="assets/img/portrait/medium/avatar-m-9.jpg"
                        class="rounded-circle img-border gradient-summer width-100" alt="Card image">
                    </a>
                  </div>
                  <div class="text-center">
                    <span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
                    
                  </div>
                  <div class="row align-self-center justify-content-center">
                    <div class="p-2 ">
                        <span class="text-primary font-weight-bold">ID:</span>
                         <span>{{selectedPatient?.mrn}}</span>
                    </div>
                    <div class="p-2 ">
                        <span class="text-primary font-weight-bold">Age:</span> 
                        <span>{{selectedPatient?.age}}</span>
                    </div>
                  </div>
                </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

Creating a custom dialog box using JavaScript

How can I create a customized dialog box in the center without displaying "the host name says..." using CSS? function myFunction() { alert("Record Save"); } Thank you in advance! ...

javascriptcss

Angular JSON Format Output: A Comprehensive Overview

I have noticed that the JSON output format currently being used may lead to errors in the application. I am trying to figure out how to achieve a different format for my code below. While I can see my data, the objects are not nested under the topics as ex ...

jsonangular

Text box input that displays the latter portion before the initial part

Looking for assistance with showing the end of the entered text rather than the beginning in an input field. For example, the input could be "Starting portion, Ending Portion". If the input field is limited to 14 characters, instead of displaying the firs ...

htmlcssangular

Is there a way to reverse the animation playback in Angular?

I am working on an animation that involves a box fading from its original color to yellow. However, I would like to achieve the opposite effect: when the page loads, I want the box to start off as yellow and then fade back to its original color. The challe ...

javascriptcssangularanimation

I must modify the initial statement to appear in bold from the paragraph with the use of JavaScript and CSS

Mr. XYZ and Mrs. ABC are known for their integrity. They own a stylish car. In the next paragraph, I would like to emphasize the first sentence by making it bold, We admire our exceptional leader J.K.L. He shows great potential. In this section, I wan ...

javascripthtmlcssnode.js

Apply a 2 pixel top border to an HTML table

Is there a way to add a double border at the headcell without using background images? Currently, I have a white color border top and want to add a grey color border on top of the white one. Is it possible to achieve something like #ccc and #fff for borde ...

htmlcss

What is the best way to utilize justify-content or align-self to perfectly center this?

Despite my efforts to center it, I'm struggling to do so. I've experimented with justify-content and align-items for each row and col class, but unfortunately, nothing seems to be effective. In the breakpoints (md, lg), I really need the 4 lorem ...

htmlbootstrap-4

Click a button to adjust the height of an element

My webpage features a dashboard with tabs on the left and corresponding content on the right. To ensure proper alignment, I have utilized Bootstrap to create two columns - one for the tabs and one for the content. However, I am facing an issue where the bo ...

javascriptjqueryhtmlcsstwitter-bootstrap

changing background color smoothly in a short time without using JQuery

Check out this link for some code .back { margin: 20px; padding: 100px; background: yellow; font-size: 30px; } <div class="back"> Fun place to stay. We got a golf cart to see the rest of the island, but the ...

htmlcss

Adding variables to a div using jquery

Is there a way to use jQuery to append variables to a div? Below are my codes, but I am looking to display div tags in the append. For example: .append("" + p + "") var image = item.image; var label = item.label; var price = item.price; ...

javascriptjqueryhtmlcssfrontend

Creating the CSS styles for input fields

Here is an example of a form: <form class="mystyle" ...> <input name="test1" type="text"> <input name="test2" type="text"> ... </form> I want to apply CSS styling to all the input elements in this form: .mystyle input[type="text" ...

htmlcss

Resizing with Jquery results in sudden movement

I have used jQuery to create a set of buttons inside a <ul> element. I am now attempting to resize the <ul> by adding a handle to the top of it, but when I try to resize it, the element jumps as shown in the images below. What could be causing ...

jqueryhtmlcssjquery-ui

The full execution of Jquery show() does not pause until it finishes

Here is the sequence I want to achieve: Show a div element with the CSS class yellow Execute a function for about 5 seconds Remove the yellow class and add the green CSS class "state Ok" However, when running my code, the div container does not appear u ...

javascriptjqueryhtmlcssshow-hide

The Material UI Grid item shifted upwards as a result of the image loading

While working on a project using the Material UI grid system with create-react-app, I encountered an issue with two adjacent grid items. Initially, they display as intended: https://i.sstatic.net/i9jeP.png However, upon loading the page, there is a brief ...

cssreactjsmaterial-ui

Transferring an object from one inventory to another

I'm in the process of developing a task manager that enables users to add and remove tasks. I am also working on enabling the ability for users to transfer tasks from one list to another. The current code I have written doesn't seem to be functio ...

javascripthtmlcssgoogle-chrome-extension

Solving the problem of Hover Effects in CSS

I am struggling to get the nav-link to be blue in color with a dark-blue hover effect. I managed to set the color correctly, but for some reason, the hover effect is not working. Can anyone help me figure out what the issue might be? Additionally, does any ...

htmlcssbootstrap-5

The color attribute for the ion-button element is not functioning properly on Android devices in

In my app, it functions correctly when running on iOS, but encounters issues when running on Android. The problem lies in the color attribute not working on buttons and other elements on Android. Removing the attribute makes them visible, but the desired s ...

androidcssangularionic-frameworksass

Creating fluid designs for my boxes with CSS to enhance responsiveness

I have designed my HTML file with 8 boxes that appear correctly on desktop, but when viewed on mobile devices, the columns are misaligned and shifted to the right side instead of being centered. How can I make it more responsive? See Preview Here is the ...

css

Conceal the Angular Material toolbar (top navigation bar) automatically when scrolling downwards

In my Angular application, the main navigation consists of a standard toolbar positioned at the top of the page. My goal is to have this navigation bar smoothly scroll up with the user as they scroll down, and then reappear when they scroll back up. I at ...

cssangulartypescriptuser-experience

Master the art of controlling Bootstrap tabs through Ajax from a different web page

In my Laravel project, there is a view that displays all products in the first tab and pending products in the second tab. However, when I try to validate a certain product from the second tab, I get redirected to another view with the first tab active. Th ...

ajaxlaravelbootstrap-4jquery-ui-tabsbootstrap-tabs