How to get a react bootstrap card to center vertically?
In this article, we will see how to center a React Bootstrap card vertically, you can use various approaches, including CSS flexbox, CSS grid, and CSS positioning.
Table of Content
- Using Flexbox
- Using CSS Grid
- Using Absolute Positioning
Steps to create React App And Install Required Module:
Step 1: Create a React application using the following command
npx create-react-app foldername
Step 2: After creating your project folder i.e. folder name, move to it using the following command.
cd foldername
Step 3: After creating the ReactJS application, Install React Bootstrap (if not already installed):
npm install react-bootstrap bootstrap
Step 4: Import Bootstrap CSS in Index.js file.
import 'bootstrap/dist/css/bootstrap.min.css';
The updated dependencies in package.json file will look like:
"dependencies": {
"bootstrap": "5.3.2",
"react": "16.12.0",
"react-bootstrap": "1.0.0-beta.16",
"react-dom": "16.12.0",
"react-scripts": "3.0.1"
},
Approach 1: Using Flexbox
Flexbox is a powerful CSS layout model that makes it easy to vertically center elements. You can use the d-flex and align-items-center classes provided by React Bootstrap to center your card vertically.
Example: Below is the implementation of the above approach.
Javascript
// App.js import React from 'react' ; import Card from 'react-bootstrap/Card' ; function CenteredCard() { const redBoxStyle = { // Set the background color to red backgroundColor: 'red' , // Add padding for spacing padding: '20px' , // Set the text color to white color: 'white' , }; return ( <div className= "d-flex align-items-center justify-content-center vh-100" > <Card> <Card.Body> <div style={redBoxStyle}> <h5 className= "card-title" > Red Box with Text </h5> <p className= "card-text" > This is a red box with some text </p> </div> </Card.Body> </Card> </div> ); } export default CenteredCard; |
Step to Run Application:
Step 1: Run the application using the following command from the root directory of the project:
npm start
Step 2: Open Browser and search the given URL:
http://localhost:3000/
Output:
Approach 2: Using CSS Grid
You can use CSS grid to create a grid layout that centers the card both horizontally and vertically.CSS Grid, also known as Grid Layout, is a powerful layout system in CSS for creating two-dimensional grid-based layouts in web design. It allows you to divide a webpage or container into rows and columns, making it easier to position and align elements on the page.
- display: grid; sets the display property of the container to grid, enabling grid layout.
- place-items: center; is a shorthand property that centers the grid items both horizontally and vertically.
- height: 100vh; ensures that the container takes up the full viewport height, which is useful for centering content on the entire screen.
Example: Below is the implementation of the above approach.
Javascript
// App.js import React from 'react' ; import Card from 'react-bootstrap/Card' ; function CenteredCard() { const redBoxStyle = { backgroundColor: 'red' , padding: '20px' , color: 'white' , }; return ( <div style={{ display: 'grid' , placeItems: 'center' , height: '100vh' , }}> <Card> <Card.Body style={redBoxStyle}> <h5 className= "card-title" > Red Box with Text </h5> <p className= "card-text" > This is a red box with some text. </p> </Card.Body> </Card> </div> ); } export default CenteredCard; |
Step to Run Application:
Step 1: Run the application using the following command from the root directory of the project:
npm start
Step 2: Open Browser and search the given URL:
http://localhost:3000/
Output:
Approach 3: Using Absolute Positioning
Absolute positioning in CSS is a technique used to precisely control the placement of an HTML element within its containing element, usually based on a specific location or coordinates on the webpage.
Example: Below is the implementation of the above approach.
Javascript
import React from 'react' ; import Card from 'react-bootstrap/Card' ; function CenteredCard() { const redBoxStyle = { // Set the background color to red backgroundColor: 'red' , // Add padding for spacing padding: '20px' , // Set the text color to white color: 'white' , // Set the position to relative to contain absolute children position: 'relative' , }; const centeredStyle = { position: 'absolute' , top: '50%' , left: '50%' , transform: 'translate(-50%, -50%)' , }; return ( <div style={{ position: 'relative' , height: '100vh' , }}> <div style={centeredStyle}> <Card style={redBoxStyle}> <Card.Body> <h5 className= "card-title" > Red Box with Text </h5> <p className= "card-text" > This is a red box with some text. </p> </Card.Body> </Card> </div> </div> ); } export default CenteredCard; |
Step to Run Application:
Step 1: Run the application using the following command from the root directory of the project:
npm start
Step 2: Open Browser and search the given URL:
http://localhost:3000/
Output:
Contact Us