I want to display a responsive image gallery using React and Bootstrap.
I want to have 2 columns per row in on small devices and 3 columns per row on medium and larger devices.
At the moment my items wrap onto to next row too soon, leaving the last column empty. Any ideas what is wrong with my Bootstrap?
Here is my code:
return(
<div className='App'>
<h2> View Images </h2>
<div className='container-fluid' >
<div className='row'>
{
rounds.map((item,index)=>{
return(
<div key={index} className='col-sm-6 col-md-4'>
<img src={item.url}
alt={`image_${item.url}`}
height="200"
/>
<br />ID: {item.id}
</div>
)
})
}
</div>
</div>
</div>
)
here is my screen Bootstrap rows and columns
I can see that my row is split into 2 columns however the second column is not populated with the image as expected, instead the image wraps onto the next row
Use col-6 instead of col-sm-6...
return(
<div className='App'>
<h2> View Images </h2>
<div className='container-fluid' >
<div className='row'>
{
rounds.map((item,index)=>{
return(
<div key={index} className='col-6 col-md-4'>
<img src={item.url}
alt={`image_${item.url}`}
height="200"
/>
<br />ID: {item.id}
</div>
)
})
}
</div>
</div>
</div>
)
Related
I changed my code so that it would bring in the information from cloud firestore instead of hardcoding it. This is my old code without firebase:
<div className="grid">
<div className="grid-child">
<img className="subImg" src={amsterdam}></img>
<p className="subImgTitle">Amsterdam</p>
<p className="subImgText">Hotels from £?</p>
</div>
<div className="grid-child">
<img className="subImg" src={london}></img>
<p className="subImgTitle">London</p>
<p className="subImgText">Hotels from £?</p>
</div>
<div className="grid-child">
<img className="subImg" src={madrid}></img>
<p className="subImgTitle">Madrid</p>
<p className="subImgText">Hotels from £?</p>
</div>
<div className="grid-child">
<img className="subImg" src={paris}></img>
<p className="subImgTitle">Paris</p>
<p className="subImgText">Hotels from £?</p>
</div>
</div>
And this is my new code with firebase:
destinations?.map(destination => {
return (
<div className="grid">
<div className="grid-child">
<img className="subImg" src={destination.img}></img>
<p className="subImgTitle">{destination.title}</p>
<p className="subImgText">Hotels from £{destination.price}</p>
</div>
</div>
)
})
In the original code, the images are all in a row however now they are all in one column. I am not too sure how to fix this so any help would be greatly appreciated. Thanks :)
If you compare the DOM rendered by each example, you will see that the problem is that in the first example you have a single <div className="grid"> but in the second you wrap each image in <div className="grid">. To fix this, just be sure to create only one grid:
<div className="grid">
{ destinations?.map(destination => {
return (
<div className="grid-child">
<img className="subImg" src={destination.img}></img>
<p className="subImgTitle">{destination.title}</p>
<p className="subImgText">Hotels from £{destination.price}</p>
</div>
)
})
}
</div>
As a next step, consider refactoring a GridChild component that encapsulates the HTML for each image in the grid.
App (React + Bootstrap 4) looks good on medium viewport or higher, but in small/mobile, there is an overflow of the search bar and sort and it drops to the next "row" which is under the sidebar:
What it looks like on mobile/small viewport
My code:
return (
<div className="container-fluid">
<div className="row">
<nav className="sidebar">
<NavBar />
</nav>
<main
role="main"
className="col-md-9 mx-sm-auto mt-4 d-flex flex-nowrap"
>
<div className="col-md-9 flex-shrink-1">
<SearchBar onSubmit={handleSearchSubmit(props.searchTerm)} />
</div>
<div className="flex-shrink-1">
<DropDown />
</div>
</main>
</div>
</div>
);
}
I was having the same problem yesterday with my navbar. I simply used media queries for width <= 320px which is small screen phones.
How can I edit the title lines by setting it to two lines?
In the current situation, each word is shown on one line. Instead, I wish the first word "broadcaster" was on one line, while the other "control panels" on the bottom line.
This is my code.
function IndexHeader() {
return (
<>
<div
className="page-header section-dark"
style={{
backgroundImage:
"url(" + require("assets/img/background.jpg") + ")"
}}
>
<div className="filter" />
<div className="content-center">
<Container>
<div className="title-brand">
<h1 className="presentation-title">Broadcaster control panel</h1>
</div>
<h2 className="presentation-subtitle text-center">
Pannello di controllo degli spot AdEx
</h2>
</Container>
</div>
</div>
</>
);
}
export default IndexHeader;
Thanks in advance to those who can help me!
You can try this.
<div className="title-brand">
<h1 className="presentation-title">Broadcaster</h1>
<h1 className="presentation-title">control panel</h1>
</div>
or
<div className="title-brand">
<h1 className="presentation-title">Broadcaster <br/> control panel </h1>
</div>
and you can handle that using CSS.
I have a search component which brings along the assets as per the search done.The problem is that render is getting called with the correct collection of assets and moreover it shows up in the dom element.I fail to understand why doesn't it show up in the actual browser window.
{this.state.data.map(function (asset) {
// Asset Card
{
return (<AssetCard asset={asset} defaultValues={this.props.defaultValues}
allAssetDetails={this.state.data}
triggerGetAssetDocId={this.getAssetDocId} key={asset.code}/>);
}
}, this)}
This is kind of the parent component which calls the child component which actually displays the asset cards based on the search. The child component looks like,
<div className="card animated small fadeInDown">
{/* Card Overlay - Selection */}
<div className="select" onClick={this.selectAsset}>
<label>
<input
type="checkbox"
className="filled-in"
name={asset.thumbnails != null &&
asset.thumbnails[k]
}
/>
</label>
</div>
<div className="card-overlay modal-trigger" data-target="asset-detail" id={asset.docId}
dbId={asset.dbId} code={asset.code} key={asset.code}
onClick={(e) => this.props.triggerGetAssetDocId(e)}>
</div>
{/* Card Image */}
<div className="card-image">
</div>
<div className="card-details">
{/* Card Content */}
<div className="card-content">
<span className="asset-name truncate">{asset.title}</span>
<div className="right">
</div>
</div>
{/* Card Action */}
<div className="card-action">
<span className="views">
<span class="jdicon-eye-open jdicon"></span>
{asset.vcount}
</span>
<span className="downloads">
<span class="jdicon-download jdicon"></span>
{asset.dcount}
</span>
<div className="right">
{/* <a className="add-wishlist"/> */}
<span className="badge img-format" data-format={assetFormat}>
{assetFormat}
</span>
</div>
</div>
</div>
</div>
Can someone please point out where my approach could be wrong?
Your "asset" data that you are sending from your parent to child will be transferred via properties so can be assessed via "this.props" ,
Suppose if you want to get the title you can do this.props.asset.title.
Similarly, you can also access the other data.
Hope this will help you
I'm using Bootstrap's grid system in my ReactJS project. Under a row, I have multiple columns (col-md-4) which I want to animate as they are added to or removed from the row as the component state changes. But Using CSSTransitionGroup immediately under a row to let the columns render as children leaves a span under the row and above the columns ruining the columns' left float.
<div className="row">
<ReactCSSTransitionGroup
transitionName={`fadeIn`}
transitionEnterTimeout={200}
transitionLeaveTimeout={200}>
{list.map(user => { return (
<div className="col-sm-6 col-md-8 col-lg-4" key={user.id}>
<div class="card">
</div>
</div>
)})}
</ReactCSSTransitionGroup>
</div>
YIELDS:
<div class="row">
<span>
<div className="col-sm-6 col-md-8 col-lg-4" key={user.id}>
<div class="card">
...
</div>
</div>
</span>
</div>
What is the correct approach to this?
Solved : just add className="row" in CSSTransitionGroup element
Sample code Here:
<CSSTransitionGroup
transitionName="item"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}
className="row">
{myIndustries}
</CSSTransitionGroup>