Centering an item using Bootstrap

I am using bootstrap in reactjs and attempting to center a text in the middle of the screen, but it seems to not be working. Can someone please point out what I am doing wrong?

<div className="h-100 d-flex align-self-center justify-content-center">
     <div className="alert alert-danger">I SHOULD BE CENTER</div>
</div>

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

Could someone assist me in determining why this is not working?

I have attempted using both align-items-center and align-self-center, but to no avail.

cssreactjsbootstrap-4bootstrap-5

Answer №1

Here is the solution...

Following @James' advice, it is recommended to switch from using align-self-center to align-items-center. However, simply making this change is insufficient. Some modifications to the code are also necessary.

<body className="vh-100 d-flex justify-content-center align-items-center">
  <div className="container-fluid vh-100 d-flex justify-content-center align-items-center">
    <div className="alert alert-danger">I HAVE BEEN CENTERED</div>
  </div>
</body>


body {
  background-color: yellow !important;
}

Answer №2

It is recommended to use align-items-center instead of align-self-center

<div className="h-100 d-flex align-items-center justify-content-center">
     <div className="alert alert-danger">I WANT TO BE IN THE CENTER</div>
</div>

Answer №3

Adding align-items-center should help. To ensure proper alignment, consider incorporating flex-direction: column in your CSS.

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

Can bootstrap columns be offset only on large devices?

Is there a way I can have the title column float to the right side of the page only on medium devices and larger screens, while keeping it centered for smaller devices like phones? Any advice is appreciated! <div class="section header"> <div ...

htmlcsstwitter-bootstrap

Begin the div at a width of 0 pixels and expand it towards the right

My current project involves opening a row of blocks with an animation. The desired outcome is to transition from 2 blocks to 3 blocks by clicking a button. Specifically, the block that needs to be added should appear in the middle and fade in from left to ...

jqueryhtmlcssanimation

Creating images or PDFs from HTML with CSS filters: a guide

Looking for someone who has experience creating images or PDFs from HTML code. The HTML contains images with CSS filters such as sepia and grayscale. If you have worked on this type of project before, I would love to hear about your experience. <img cl ...

javascriptphpcsspdf-generation

Tips for invoking a function from one React component to another component

Currently, I am working on two components: one is Game and the other is PickWinner. The Game component serves as the parent component, from which I need to call the pickWinner function in the PickWinner component. Specifically, I want to trigger the startP ...

reactjstypescript

Utilizing Axios to Extract Data from a Specific Row in a React MUI Data-Grid Table

In an attempt to implement the functionality of returning all data from a selected row using this example, I encountered an issue. Unlike the demo, which uses the useDemoData mod for table population, my approach involves utilizing Axios to fetch data from ...

reactjsreact-hooksmaterial-uidatagridstate

Error: The function subscribe in _store_js__WEBPACK_IMPORTED_MODULE_12__.default is not supported

In my main App component, I am subscribing to the store in a normal manner: class App extends Component { constructor(props) { super(props) this.state = {} this.unsubscribe = store.subscribe(() => { console.log(store.getState()); ...

javascriptreactjsnpmreact-reduxredux-saga

Using jQuery to submit a form and update values

I am currently working with a datatable that includes a detail column with an edit button. Upon clicking the edit button, I pass the ID as a parameter and fetch all the values associated with that ID to display in a form. However, when I edit the values an ...

javascriptjqueryhtmlajaxbootstrap-4

What benefits come from dynamically loading and unloading JavaScript and CSS stylesheets?

Introduction: Currently, I am in the process of developing a website that will utilize ajax to change content without refreshing the main frame and images every time. The main frame has its own site.css stylesheet. Query 1: Considering the use of a sing ...

javascripthtmlcssajax

Which authentication details should be utilized for deploying a React application on AWS?

After developing an app that leverages amplify for deployment and dynamodb for data retrieval, I am pondering the idea of using separate credentials solely for deployment purposes. The current set of credentials seems to be working fine for me, but is it r ...

reactjsamazon-web-servicesamazon-dynamodbdevopsaws-amplify

The background image vanishes in Chrome when scrolling downwards

After setting an image with a resolution of 1980 x 1200 as the background for my web page, I encountered an issue. When scrolling down, around the height of 1200px, the image disappears and is replaced by a white background. This problem only occurs in Chr ...

htmlcssgoogle-chrome

Retrieving Styles from an Element in Next.js: A Step-by-Step Guide

If we consider the scenario where there is a file named global.css... .test { background-color: black; width: 50px; height: 50px; } Due to certain reasons, it becomes necessary to retrieve style data from an applied element. Attempts were made using ...

reactjsnext.js

The web server is unaware of the CSS and JS references

After loading my ASP.NET MVC project on the web server, I encountered an issue where none of my CSS and JS references were loaded. Some of the references in my default layout are listed below: <head> <link href="/Scripts/css/bootstrap ...

c#htmlcssasp.net-mvc

When trying to reference "this" and store it in a variable, it appears as undefined. However, DevTools show that it is actually defined

I've encountered an unusual situation in my React app involving the binding of "this" - I have a function within a component named "App" that is located in a separate file. In the main file, I've bound the "this" command to it. What's puzzl ...

javascriptreactjsthisjsx

Having trouble with Firebase? The error message "No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp()" might be popping up. Let's fix it together!

I am currently working on developing a chatroom application using react and firebase. I encountered an issue when trying to import both auth and firestore simultaneously with the line: import { auth, firestore } from 'react';. After attempting fi ...

reactjsfirebasefirebase-authentication

Preventing the page from auto-refreshing upon button click

Recently, I have encountered an issue with a button on my webpage. Every time the button is clicked, the onclick code executes and then the page refreshes. This was not a problem before, but now it seems to be automatically refreshing the page. The curren ...

jqueryhtmlbootstrap-4

Guide to altering the color of the row that is clicked in a table using css and jquery

Is there a way to change the text color of a row in a table when it is clicked, similar to an example like this but without changing the background color? The code I have tried is not working for me. Below is a snippet of the code I am using: $("#myTab ...

javascriptjqueryhtmlcsshtml-table

Tips for setting a specific height for an HTML table

For some reason, I can't seem to control the height of this table. I've set it to a maximum of 20px but all the rows are still showing. Here is the CSS: table { border:1px solid black; overflow:hidden; height:20px; max-height:20 ...

htmlcss

Incorporating Entrance Animations for Individual Elements within ngView Using AngularJS

Can each content within ngView be animated individually upon entering, rather than the entire View (div) itself? ...

javascripthtmlcssangularjs

Issue with retrieving body class in Internet Explorer on Magento platform. The body class is not being recognized in IE, but works fine in Mozilla and Chrome

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>" dir="ltr"> <?php echo $this->getChildHtml('head') ?> <bod ...

jqueryhtmlcssmagento

Is the use of !important included in Bootstrap 4?

Even though I've positioned the style.css file after Bootstrap, it still isn't working. Upon inspection, I noticed that... https://i.sstatic.net/ay621.png How can I solve this issue? .bg-info{ background-color: #17a2b8 !important; } ...

htmlcsstwitter-bootstrapbootstrap-4css-specificity