Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

205
Visualizações
React Bootstrap Row issue

Ok, so. I am currently following this tutorial: https://www.freecodecamp.org/news/react-movie-app-tutorial/ . I have copied the code verbatim. I have installed bootstrap via the instructions on this website: https://react-bootstrap.github.io/getting-started/introduction#stylesheets . I have tried every configuration in every place of importing 'bootstrap/dist/css/bootstrap.min.css' including the <link>. The Row class is not working. Here is my Code...

import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'
import MovieList from "./components/MovieList"


const App = () => {

  const [movies, setMovies] = useState([])

  //const [favorite, setFavorite] = useState([])

  //const [searchValue, setSearchValue] = useState("")

  const getMovieRequest = (searchValue) => {

    const url = `http://www.omdbapi.com/?s=jaws&apikey=76fd1ead`

    fetch(url)
      .then(resp => resp.json())
      .then(data => {
        if (data.Search) {
          setMovies(data.Search)
        }
      })
  }

  useEffect(() => {
    getMovieRequest()
  }, [])

  console.log(movies)



  return (
    <div className="container-fluid">
      <div className="row">
        <MovieList movies={movies} />
      </div>
    </div>
  )

}

export default App;

import React from "react"

/*export default function MovieList(props) {

    const displayMovies = props.movies.map(movie => {
        return (
            <div>
                <img src={movie.Poster} alt="moive" />
            </div>
        )
    })

    return(
        <>
            {displayMovies}
        </>
    )
}*/

const MovieList = (props) => {
    return (
        <>
            {props.movies.map((movie, index) => (
                <div>
                    <img src={movie.Poster} alt="movie" ></img>
                </div>
            ))}
        </>
    )
}

export default MovieList;
import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css'



ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Any help would be greatly appreciated!

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

There is "bootstrap" itself and it is independent of what kind of framework you are using (React, Vue, Angular or just vanilla). It uses mostly css classes and jQuery for some functionality. Then there is "react-bootstrap", which is a complete re-write of bootstrap logic. It's written in React and offers a collection of components. That's why when you use react-bootstrap you only need the css part of bootstrap, but not the js/jQuery part.

Using only bootstrap?

  • npm i bootstrap
  • import 'bootstrap/dist/css/bootstrap.min.css' in your App.js or index.js

https://codesandbox.io/s/crazy-meninsky-9lmpmr?file=/src/App.js

Using react-bootstrap?

  • npm i react-bootstrap boostrap
  • import 'bootstrap/dist/css/bootstrap.min.css' in your App.js or index.js

https://codesandbox.io/s/serene-heisenberg-1xfvut

When you look into the both sandboxes you see that row is working either way.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda