Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Adicionar Bootstrap 4 no projeto

No projeto de Aula vimos como utilizar o Materialize como base de estilos, como exercício quero fazer o mesmo projeto com Bootstrap 4. Li em outros sites que existe uma pacote react-bootstrap. Por fim minha dúvida é, não é possível apenas dar import no bootstrap.css? Se não, por que?

1 resposta
solução!

Olá Luis, tudo bem com você?

não é possível apenas dar import no bootstrap.css?

Podemos importar o bootstrap da maneria tradicional sim, você poderia fazer isso inclusive no nosso index.html

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <meta
      name="description"
      content="Web site created using create-react-app"
    />

Ou fazendo download do pacote igual com o materialize:

>> npm install bootstrap

e em nosso arquivo:

import 'bootstrap/dist/css/bootstrap.min.css'

E dessa forma poderiamos ter algo como:

<h1 className="text-primary"> Testando o Bootstrap </h1> 

Agora acredito que utilizar o react-bootstrap pode ser uma opção um pouco mais "eficiente", por algumas razões:

  • Legibilidade / Consistência

Veja utilizando o react-bootstrap parece mais natural do que se trata o nosso componente:

<Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>

Com o boostrap normal:

<div className="card" style={{ width: '18rem'}}>
  <img src="..." className="card-img-top" alt="...">
  <div className="card-body">
    <h5 className="card-title">Card title</h5>
    <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" className="btn btn-primary">Go somewhere</a>
  </div>
</div>

E outro ponto é que temos alguns componentes do bootstrap que utilizam o jquery para criar o comportamento (por exemplo os modais), e utilizando o react-bootstrap não precisamos ter essa importação :)

Mas caso você tenha um projeto e acredita que apenas o css presente no bootstrap te satisfaz você pode tranquilamente fazer a importação e utilizar sem nenhum problema :)

Abraços e Bons Estudos!