¿Cómo alinear una imagen y texto verticalmente en la misma línea en React Bootstrap?

ReactJS tiene una manera muy hermosa de alinear imágenes y texto verticalmente en la misma línea en React Bootstrap. ReactJS es una biblioteca front-end desarrollada por Facebook para construir varios componentes del front-end. Bootstrap es un marco CSS desarrollado por Twitter para crear sitios web front-end enriquecidos con CSS. 

Incluyendo Bootstrap: Bootstrap se puede incrustar en la aplicación React al incluir el siguiente enlace en la sección <head> de nuestra página HTML:

<link rel="stylesheet" 
      href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
      integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
      crossorigin="anonymous" />

El código anterior incrustará el marco CSS Bootstrap en nuestra página web HTML.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

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;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

Ejemplo de salida de React

Producción

Publicación traducida automáticamente

Artículo escrito por neeraj kumar 13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *