I am pulling data from an api and mapping over the JSON array to display the results, how do I use bootstrap grid to make the elements show one beside another instead of like a list?
//App.js
<div>
<FileHeader/>
{this.state.films.map(film=>(
<div className="container">
<div key={film.id} id='cardItem' className=''>
<MovieCard film={film}/>
</div>
</div>
))}
</div>
And this is the MovieCard Component
render() {
var film = this.props.film;
return(
<div className='card' style={{width:'18rem'}}>
<div className="card-body">
<h5 className="card-title">{film.title}</h5>
<h6 className='card-subtitle mb-2 text-muted'>{film.release_date}</h6>
<p className='card-text'>{film.description}</p>
</div>
</div>
)
}
How do I use the grid element to display the cards side by side?
You should only have 1 container for your items, so get it out of the map(), then insert a row in which you'll inject the card elements. You'll have to decide how much items you want on each row. In the example below you'll have 12 items per row as a row is made of 12 columns and col-xs-1 means each item will take 1 column in the row.
You can decide it per each screen size using col-xs, col-sm etc...
<div className="container">
<div className="row">
{this.state.films.map(film => (
<div key={film.id} id="cardItem" className="col-xs-1">
<MovieCard film={film} />
</div>
))}
</div>
</div>
Please try this....
<div className="container">
<div className='row'>
<FileHeader/>
{this.state.films.map(film=>(
<div key={film.id} id='cardItem' className="col-sm-3"><MovieCard film={film}/>
</div>
))}
</div>
</div>
Moviecard component...
render() {
var film = this.props.film;
return(
<div className='card' style={{width:'18rem'}}>
<div className="card-body">
<h5 className="card-title">{film.title}</h5>
<h6 className='card-subtitle mb-2 text-muted'>{film.release_date}</h6>
<p className='card-text'>{film.description}</p>
</div>
</div>
)
}
Related
I am using Bootstrap to design my React project and all of a sudden the grid system doesn't work properly.Basically I need to have the first div with the className of row above the Card components, and centered.I have added more code but nothing that had to do with that particular main page or styling.I have pasted below my code.Does anyone know why this could've happened and how to fix it?
return (
<div>
<section id="service">
<div className='container'>
<div className='row'>
<div className='col-12'>
<h3 className='fs-5 text-center mb-0'>Our Services</h3>
<h1 className='display-6 text-center mb-4'>Our <b>Awesome</b> Services</h1>
<hr className='w-25 mx-auto'/>
</div>
</div>
<div className='row'>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Easy Usage' content='Access your assigned task with only one click and start testing your code right now.'/>
</div>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Instant Feedback' content='Run your solution using only one submit button with the help of our online compiler.'/>
</div>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Optimize your time' content='Reduce your time spending on uploading assignments with our easy dashboard method.'/>
</div>
</div>
</div>
</section>
</div>
)
I have a Hit const which displays products (from Algolia). I use it in my main component. I would like to display the products in a row, however, I don't know how to do that, since if I write the row class around the const (in the main component) it doesn't work.
The Hit const is in a way mapping multiple products and I can't create a row from it, because placing row around Hit in the main component treats it as if it were one item and placing row inside of Hit treats each product as one row.
How could each product from Hit be displayed as a column inside a row?
This is the Hit const:
const Hit = ({ hit }) => (
<div className="col-6 col-sm-4 col-md-3">
<a className="mb-5 d-block font-color-black cursor-pointer">
<div
className="mb-3"
style={{
paddingBottom: "125%",
background: `url("${hit.image}") center center/cover`,
}}
></div>
<p className="font-size-subheader mb-2 font-weight-medium">
{hit.product}
</p>
<p className="font-size-subheader font-weight-medium pb-2 borderbottom border-color-black">
{hit.cena} <span className="hit-em">€</span>{" "}
</p>
</a>
</div>
);
This is the return of the main component, where Hit is used:
return (
<InstantSearch
searchClient={searchClient}
indexName="Besedilo"
searchState={props.searchState}
createURL={props.createURL}
onSearchStateChange={props.onSearchStateChange}
>
<div className="py-5 my-5">
<div className="py-4">
{/* Main Content */}
<div className="custom-container">
<div className="row">
<div className="col-12 col-lg-10 offset-lg-2">
<div className="collection">
<div className="row mb-5 collection-1">
<Hits hitComponent={Hit} /> //this is how Hit is used
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</InstantSearch>
);
Code for Filter Button
import React from "react";
function FilterButton(props){
return (
<div className="box">
<button
type = "submit"
className="button is-info"
onClick={()=>props.setFilter(props.name)}
>
<span>{props.name}</span>
</button>
</div>
);
}
export default FilterButton;
Unfortunately, the div tag is not able to put the following buttons(All, Active, Completed, Important) on the same line.
Is there any solution for this problem?
If you want to use the grid system of BULMA, you can do the following things:
see https://bulma.io/documentation/columns/basics/:
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>
If you want to use css in order to do this, you can use the css property display: inline-block,as it is shown here:
https://www.w3schools.com/css/css_inline-block.asp
I am new to using react and i have started to write a program but i have hit a wall and don't know how to overcome it.
I am trying to display movie poster with their name and release date on the side of the poster. If you see the screenshot you can see thats not the case right now, the text is being placed below the poster.
How would i go about to make the poster and text side by side?
this is my render code if the problem is within there:
return (
<div className="App">
<h1>Movie logger app</h1>
<input value={word} onChange={handleChange} />
<button onClick={getMovieName}>Find Movie</button>
{data.map((item) => {
return <div key={item.id}>
<img src={item.poster} alt=""/> <h2>{item.title}</h2> <h4>{item.date}</h4>
</div>;
})}
</div>
);
This is more of a CSS question than a React question. You can try a flexbox layout, like so:
{data.map((item) => (
<div key={item.id} style={{ display: "flex" }}>
<img src={item.poster} alt="" />
<div style={{ marginLeft: 20, display: "flex", flexDirection: "column" }}>
<h2>{item.title}</h2>
<h4>{item.date}</h4>
</div>
</div>
))}
You could use bootstrap grid system to give each element the half of the screen.
https://getbootstrap.com/docs/4.0/layout/grid/
{data.map((item) => {
<div class="container">
<div class="row">
<div class="col-6">
<img src={item.poster} alt=""/>
</div>
<div class="col-6">
<h2>{item.title}</h2> <h4>{item.date}</h4>
</div>
</div>
</div>
})}
Another option could be to position your elements in a table that cover all the screen (not recommended )
I'm writing a code where there's an arrayList having two names in it i.e.Bob & Steve and i want to display them such that if Bob is displayed it should be green in color and if Steve is displayed it should be REd in color.
Component.CSS
.Bob{
font-weight:bold;
color:green;
}
.Steve{
color:red;
}
Component.HTML
<div class="container">
<div class="row" *ngFor="let st of Names;">
<div class="col-2">
<p class="Bob">{{st}}</p>
</div>
<div class="col-2">
<p class="Steve">{{st}}</p>
</div>
</div>
</div>
in Component.Ts
Names:string[]=['Bob','Bob','Steve','Bob','Steve']; in Component.Ts
You can provide class based on condition .
Modify your code like below :
<div class="container">
<div class="row" *ngFor="let st of Names;">
<div class="col-2">
<p [ngClass]="(st=='Bob')?'Bob':'Steve'">{{st}}</p>
</div>
</div>
</div>
Here is the working example :
Working Stackblitz Example
When we have a large number of elements and we can showed it with different background we can adopt several approaches.
Has an array of styles/background and use the index
colors=['red','yellow','green'...]
<div *ngFor="let item of items;let index=i>
<div [style.background-color]="colors[i]">item.data</div>
</div>
The background was a "property" of "items"
items=[{data:...,color:'Red'},{data:...,color:'yellow'},...]
<div *ngFor="let item of items;let index=i>
<div [style.background-color]="item.background">item.data</div>
</div>
We can use
[style.css_property]="value"
//or
[className]="class"
//or
[ngClass]="{'class':condition}"
In your case, Aman, I think that it's better that your "items" has a property "class" that was, e.g.
{data:...,class:'bold-true green-true'}
So, when you want add a item, you can make a function
getClass()
{
let class="";
if (this isBold)
class="isBlod-true";
if (this.isCut)
class=class+" isCut-true";
if (this.isGreen)
class=class+" isGreen-true";
...
return class
}
And when you add an item, you can do
items.push({data:...,class:this.getClass()})
Then the code
<div *ngFor="let item of items;let index=i>
<div [className]="item.class">item.data</div>
</div>
make the trick