Tips for centering a bootstrap card on the screen using reactjs

I've been struggling to keep my card centered on the screen despite using align-items and justify-content. I've researched on various websites to find a solution.

//Login.js

import React, { Component } from 'react';
import './App.css';

class Login extends Component {
  render() {
    return (
      <div className="App">
        <div className="card cardalign w-50">
          <div className="card-body">
          <img className="logo" src="https://cdn.macrumors.com/article-new/2018/05/apple-music-note-800x420.jpg"/>
                <h1 className="signintext">MusicFlo Signin</h1>
                <form className="logininputs">
                <input className="emailinput" placeholder="Email"/>
                <input className="passwordinput" placeholder="Password"/>
                <button className="btn btn-primary btn-md m-2">Log In</button>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

export default Login;

Here is the CSS code:

//App.css

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

.logo {
  height:120px;
  width: 220px;
  border-radius: 50%;
  margin-top: 150px
}

.signintext {
  margin-top: 50px;
  font-style: italic
}

.logininputs {
  display:flex;
  flex-direction: column;
  align-items: center
}

.emailinput {
  width: 30vw;
  height: 5vh;
  margin-bottom: 10px;
  border: solid 2px indigo
}

.passwordinput {
  width: 30vw;
  height: 5vh;
  border: solid 2px indigo
}

.card {
  align-items: center;
  justify-content: center;
  background-color: lightgrey;
  border: 5px solid black

}
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Despite referencing the ReactJS documentation, I'm still unable to center the card. Image provided for reference: https://i.sstatic.net/Ro3xd.png

Any insights or suggestions would be greatly appreciated.

Answer №2

Here are some CSS properties to center content:

  align-items: center;
  justify-content: center;

It's important to note that these properties only work when used with display: flex.

Furthermore, these properties only affect the children of the flex container. For example, if you want to center a card, the parent of the card should have these settings:

display: flex;
align-items: center;
justify-content: center;
width: 100%; // ensuring the parent takes up the full screen 
height: 100%; // allowing the content to be centered properly

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

Discover the visibility of an element through monitoring DOM manipulation with Selenium

Is it possible to monitor a webpage for events such as when an element becomes visible? Can this be achieved using Selenium? For instance, if I set a timeframe to watch a webpage from startTime to endTime, various page events could be recorded, including ...

The Proper Way to Include External CSS in a Next.js Page Without Triggering Any Warnings

I find myself in a scenario where I must dynamically inject CSS into a webpage. The content of this page is constantly changing, and I am provided with raw HTML and a link to a CSS file from a server that needs to be displayed on the page. My attempt to ...

The express post request body fails to appear, rendering it empty

Server Side Code const express = require('express'); const app = express(); app.use(express.json()); app.use(express.urlencoded({ extended:true })); app.post('/',(req,res)=>{ console.log(req.body) }) Client Side Code const da ...

Consolidate list: Make sure to leave only the currently active item open

For some reason, I am encountering an issue with this code on this platform. The problem is that every time I click on a list title, all items open up instead of just the one I clicked on. Is there a way to modify this code so that only the clicked item ex ...

Accessing the useState value within useEffect without triggering a state update in useEffect

Currently, I'm in the process of creating a function that handles a string array based on keys from objects. Suppose this function appears as: import React, { useState, useEffect } from "react"; import FieldContext from "../contexts/Fie ...

Is it necessary to adjust my font stack for optimal viewing on a high DPI tablet or computer screen?

My CSS includes the following font definition: html { font-size: 95%; font-family: Arial, Helvetica, sans-serif } I want my application to display well on PC, iOS, and Android tablets. I am aware that different devices have varying resolutions. C ...

Generate a compressed folder containing a collection of PNG images

While attempting to generate a zip file using JSZip, I encounter issues where the images are falsely flagged as not being instances of Blob or the final result turns out to be corrupt and cannot be extracted. The process involves an API on the back-end th ...

Numbering each numeral

Looking to add a sequence number next to each digit using jQuery or JavaScript: If I enter the following numbers: 1, 1, 1, 2, 3, 4, 5, 5, 5, 6, 7, 8, 8, 9, 10 and so on then the desired output should be: 1.1, 1.2, 1.3, 2.1, 3.1, 4.1, 5.1, 5.2, 5.3, 6.1 ...

Employing [style.something.px]="2" in Angular to specify the thickness of the border

Presently, I am setting the width of the element using this code format: <div [style.width.px]="size" [style.height.px]="size"></div> What I am aiming for is to utilize a comparable format but to define the border-width css attribute, such as ...

Error: TypeScript React SFC encountering issues with children props typing

I am currently working with a stateless functional component that is defined as follows: import { SFC } from "react"; type ProfileTabContentProps = { selected: boolean; }; const ProfileTabContent: SFC<ProfileTabContentProps> = ({ selected, child ...

Using a prop array as v-model in a Vue JS CheckBoxGroup implementation

Struggling to create a reusable CheckBoxGroup component with a prop array as v-model. I checked out the vuejs guide at https://v2.vuejs.org/v2/guide/forms.html#Checkbox which uses the v-model array in the data of the same component. However, this approach ...

What is the best method to extract the values of objects in an array that share

var data= [{tharea: "Rare Disease", value: 3405220}, {tharea: "Rare Disease", value: 1108620}, {tharea: "Rare Disease", value: 9964980}, {tharea: "Rare Disease", value: 3881360}, ...

Having trouble accessing `event.target.value` when selecting an item from the autocomplete feature in Material-UI with the

*** UPDATED CODE BASED ON RECOMMENDATIONS *** I am currently in the process of familiarizing myself with material-ui. I have been exploring how to incorporate event handling with material-ui components, specifically by combining an autocomplete feature wit ...

The useEffect hook appears to be inactive

Struggling to understand why the function inside my useEffect is not running. No console prints, indicating that the useEffect is not executing. Additionally, the network tab shows that the API call is not being made. UPDATE: The issue appears to be with t ...

Sorting the keys of objects within an array

Currently, I am in the midst of an evaluation where I have the freedom to utilize any resources at my disposal. The task at hand involves using the .filter method to remove objects without a specific key. Here is the provided prompt... Create a function n ...

Javascript Snake: I am having trouble making my snake's tail grow longer

I've created a snake game that is almost fully functional. The issue I'm facing is that when the snake eats food, the food changes location but the tail of the snake doesn't grow in size. I suspect that my understanding of arrays might be la ...

How to change the border color of a Bootstrap card when hovered over

I'm struggling to achieve a border color change effect on hover for Bootstrap cards. <b-card no-body class="my-card border"> <button>Click here</button> <b-collapse> <b-card-body> <b-c ...

Customize the behavior of checkboxes and row clicks in the Table component of Material-UI to have distinct actions

I'm currently working on enhancing the functionality of a Material-UI Table component within my React application. One challenge I am facing is how to allow users to select rows without the entire row being selected each time they click anywhere withi ...

Are your file uploaders malfunctioning by saving empty image files?

I am currently working on a file uploader using JavaScript and Classic ASP. The process involves importing an image into a canvas, converting it to a base64 URL, and then sending that URL to the ASP script for decoding and downloading. Although my AJAX re ...

Tips on incorporating a parent selector into a relative CSS selector in Selenium with Python

Let me do my best to articulate the issue. This inquiry pertains to selenium in Python. Take a look at this example: for row in driver.find_elements(By.CSS_SELECTOR, "div[style='overflow: hidden;'] > div > div:nth-child(3)"): ...