How to align an image and text vertically on the same line in React Bootstrap?
Last Updated :
04 Apr, 2023
ReactJS has a very beautiful way to align images and text vertically in the same line in React Bootstrap. ReactJS is a front-end library developed by Facebook to build various components of the front-end. Bootstrap is a CSS framework developed by Twitter for building CSS enriched front end websites.
Including Bootstrap: Bootstrap can be embedded in the React application by including the following link in the <head> section of our HTML page:
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous" />
The above code will embed the CSS Bootstrap framework into our HTML webpage.
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure: It will look like the following.
Project Structure
We can align an image and text vertically by placing a break line tag in between an image and text tags. React HTML tags are self-closing tags, so make sure that as you open a tag, you close the tag also.
Filename: App.js
Javascript
import React from "react" ;
import Container from "react-bootstrap/Container" ;
import Card from "react-bootstrap/Card" ;
import "./App.css" ;
const App = () => {
const subtitle = "Hi There" ;
"images1/Free-Download-Sunrise-Desktop-Images-Wallpapers.jpg"
return (
<Container className= "p-3" >
<Card>
<div>
<img
src={infoIcon}
alt= "Info"
style={{
width: 20,
backgroundColor: "red" ,
verticalAlign: "center"
}}
/>
<br />
<i className= "text-muted p-0" style={{ backgroundColor: "red" }}>
{subtitle}
</i>
</div>
</Card>
</Container>
);
};
export default App;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Output
Share your thoughts in the comments
Please Login to comment...