How to align an image and text vertically on the same line in React Bootstrap?

Last Updated : 14 Jan, 2021

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"; 
  const infoIcon = "https://www.pixelstalk.net/wp-content/uploads/" +  
  "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

My Personal Notes

Related Articles

Javascript