Struggling to align a div in Bootstrap 4/Angular?

I am currently enhancing the appearance of my application using Bootstrap,

My current goal is to center a "card" provided by Bootstrap.

I discovered that I can achieve this with mx-auto.

The code I implemented with mx-auto works perfectly in JSFiddle.

<div class="card text-white bg-info mx-auto" style="max-width: 18rem;">
    <div class="card-header">Header</div>
        <div class="card-body">
            <h5 class="card-title">Info card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the     card's content.</p>
        </div>
    </div>
</div>

However, in my actual application, the card is not centered. Can anyone suggest why this might be happening?

The Bootstrap version integrated into my Angular project is 4.1.2

This is how I added Bootstrap to my Angular project:

  • npm install bootstrap --save
  • npm install jquery --save
  • npm install popper.js --save

Then, I included the following in my angular.json file:

  1. "./node_modules/bootstrap/dist/css/bootstrap.css" in the styles section

  2. "./node_modules/jquery/dist/jquery.min.js" in the scripts section

  3. "./node_modules/popper.js/dist/umd/popper.min.js" in the scripts section

  4. "./node_modules/bootstrap/dist/js/bootstrap.min.js" in the scripts section

htmlcssangularbootstrap-4jsfiddle

Answer №1

Explore a new way to align content with a row and column using the justify-content-center class:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="row justify-content-center">
    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card text-white bg-info">
        <div class="card-header">Header</div>
        <div class="card-body">
          <h5 class="card-title">Info card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the     card's content.</p>
        </div>
      </div>
    </div>
</div>

Answer №2

Bootstrap 4 comes equipped with the handy CSS class 'text-center' which allows you to easily center content within any div element.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="card text-white bg-info mx-auto text-center" style="max-width: 18rem;">
    <div class="card-header">Header</div>
        <div class="card-body">
            <h5 class="card-title text-center">Info card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the     card's content.</p>
        </div>
    </div>
</div>

Answer №3

It appears that you may have overlooked including one of the required files. Are you certain you have all of these?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

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

Utilizing distinct AngularJS controller files within a Laravel&Angular collaboration project

I attempted to implement this solution: However, I encountered the following error: GET http://localhost:8000/js/TaskController.js net::ERR_ABORTED 404 (Not Found) Afterwards, I explored another solution: https://github.com/angular/angular-cli/issues ...

phpangularjsangularlaravellaravel-5.7

What is the method for adding a semi-transparent background color overlay to a highlighted image?

Hey there, I'm having trouble finding the right CSS to create an overlay on my featured image that will make my title stand out more. Does anyone have any suggestions on how to achieve this effect for my website www.quinstudio.nl/gallery? ? { backgro ...

csswordpressbackgroundoverlay

Prevent CSS from resizing text to the very bottom of the page

My goal is to prevent text from overflowing all the way to the bottom of the page, as I need a space for another div at the end. How can I create a gap between the text and the bottom of the page? Additionally, how do I restrict the size and position of t ...

csshtmltextconstraints

gh-pages: Images that should not be cached

Every time my build server completes a new build, it automatically uploads a pass/fail graphic to the gh-pages branch. I'm looking to showcase this graphic on my project's page. Unfortunately, it appears that gh-pages is caching the image. Any s ...

htmlgithubgithub-pages

Extracting IDs, classes, and elements from a DOM node and converting it into a string format

Can someone please guide me on how to extract the DOM tree string from an element? Let's consider this HTML structure: <div> <ul id="unordered"> <li class="list item">Some Content</li> </u ...

javascripthtml

Refresh the current page with jQuery Mobile when it is clicked

I have a multi page template in jQuery Mobile. How can I refresh the current page when clicking on a hyperlink or button? I am using JQM version 1.4.5 Despite trying the code suggested in how to refresh(reload) page when click button in jQuery Mobile, it ...

javascriptjqueryhtmlcssjquery-mobile

What could be causing the second image to not drop in the proper position in an HTML and JavaScript environment?

I am encountering an issue with a simple drag and drop implementation using images in my code. The first image works fine, but for some reason the second image does not display correctly when dragged inside the div boxes; it appears outside of the box. Can ...

javascripthtml

The Bootstrap Navbar-fixed-bottom div is covering up the JS rendered content due to an

The content on my main page container is being obscured by the content within this DIV: <div class="navbar navbar-fixed-bottom"></div> Below is the CSS from the GitHub project (bootstrap sass) // Code to fix top/bottom navbars when screen re ...

javascriptcsstwitter-bootstrap

Determine whether the specified date falls on a public holiday within the selected

I'm currently working with Angular 12 and I need to determine whether today is a regular workday or a day off for employees, including weekends and public holidays. I attempted to use the date-holidays package by importing it like this: import Holida ...

javascriptangularwebpackbabeljs

What is the best way to ensure that the radius of the circle adjusts according to the canvas element in

I've successfully drawn a circle on a canvas element, but now I need to make it responsive. How can I achieve this? I want the radius of the circle to change by a certain amount when the browser width or height changes. How do I calculate this changi ...

javascripthtmlcanvas

What is the best way to adjust the dimensions of a blank image without altering the size of

I am attempting to set the size of an empty image to 150px. While using float: left works on Firefox, it does not have the same effect on Google Chrome. Here is the HTML code: <div> <img src='some broken url' alt='no image'& ...

htmlcss

Exploring Angular 2, JavaScript, Efficiency in Memory Consumption, and the Importance of Garbage

I am feeling completely lost and on the verge of giving up on implementing Angular 2 for building a real-world application due to memory usage issues. Despite following all the best coding practices such as nulling properties when no longer needed, removi ...

angularmemorygarbage

Change the left position of the sliding menu in real-time

I am currently designing a website with a sliding menu feature. By default, the menu is set to -370px on the left, displaying only the "MENU" text initially. When a user hovers over the menu, it expands to the right, allowing them to select different menu ...

javascriptjquerycsshtml

Is it possible for me to create a Pomodoro clock similar to this one?

Can you provide guidance on creating a Pomodoro clock similar to this design: https://i.sstatic.net/qhd1Z.png As time progresses, the arrow should move around causing the circumference of the circle to increase. What approach or library would you recomm ...

javascriptjqueryhtmlcss

Concealing specific sections of HTML content in a webview on the fly

I've been experimenting with a proof of concept feature to implement the ability to conceal certain parts of a web page loaded in a webview, but I seem to be encountering some issues... Within a UIWebview extension, I have something similar to this c ...

javascriptioscssswift

Tips for managing the fixed position property in CSS when dealing with overlapping elements

This image displays the overlap of two divs. One div contains a table with two buttons floating on the right, while the other div features an image. Here, the overlapping issue does not occur. I have detailed my problem with overlapping above and I aim t ...

htmlcssasp.netvisual-web-developer

What is the method for adjusting the input text color in a textarea to green?

Is there a way to change the input color for this textarea so I can type green text on a black background? textarea{ background-color: black; } <textarea id="htmlCode" class="1111" placeholder="HTML"></textarea> ...

htmlcssweb

Creating a user-friendly login feature within the navigation bar of an HTML webpage

As someone who is new to CSS, I am currently working on a welcome page that includes a login section in the navbar. While I have successfully created div sections for the entire page, I am seeking assistance with coding the navbar using CSS. The current C ...

htmlcss

Is it recommended to incorporate TypeScript throughout all components of the MEAN stack development?

My decision to build my web application using the MEAN stack was primarily based on the use of JavaScript throughout all layers. The idea of having one language for everything seemed appealing at first. However, I recently discovered TypeScript and was int ...

node.jsangulartypescriptexpressmean-stack

Make the background disappear when the text field is left empty and the cursor is not present (onUnfocus)

When the text field is empty and there is no cursor in the text field, I want it to be transparent and for the spell checker not working. The result should be displayed a little to the left inside a <div>. Should this be done using CSS, JavaScript, ...

javascriptphpjqueryhtmlcss