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:
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