Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

203
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda