I'm using ReactJS and iterating through an array and generating a bootstrap card for every object in the array but the cards start at the far left of the screen and they fill in left to right until they hit 5 and then creates a new row.
I would like to see if there is a way to make the first card, if there is only one, start in the center of the screen, and then populate outward as more cards get added.
Is something like that possible?
<div className='row mt-lg-3 row-cols-xs-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-5 g-4'>
{viewElements.map((element) => (
<ElementItem key={element._id} element={element} />
))}
</div>
This is how it currently looks when there are 5 cards, and it will start on the next row. I like how that looks but when there are fewer than 5 I want them to begin populating in the center of the page, not from left to right, like the second photo shows.
<section className='mt-3'>
{viewElements ? (
<div className='row mt-lg-3 row-cols-xs-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-5 g-4'>
{viewElements.map((element) => (
<ElementItem key={element._id} element={element} />
))}
</div>
) : (
<div className='container mt-5'>
<div className='content mt-5'>
<div className='row'>
<div className='row'>
<h3>No Elements To Display</h3>
</div>
</div>
</div>
</div>
)}
</section>
There is a way to arrange cards using react-bootstrap https://react-bootstrap.github.io/components/cards/#grid-cards You can play around with how many cards are in each row. You can also decide the number of rows and columns you want.
Related
Before, when i don't import materialize
it's ok
not import materialize
After, when i imported materialize in index.js it broke my page like this
the page have a container grid 12 column but i don't know how it do that, i just import not do any thing to want to have grid 12 column
import materialize.
i hope every one can explain for me in this case :((
-- I have classname coinciding with Materialui, it is "container"--
return (
<div className="container">
{data.map(player => (
<div className="column" key={player.id}>
<div className="card">
<img src={player.img}></img>
<h3>{player.name}</h3>
<p className="title">{player.club}</p>
<Link to={`detail/${player.id}`}>
<p><button>Detail</button></p>
</Link>
</div>
</div>
))}
</div>
)
We can see that the container of Material UI is active
--After changing its name, it worked as I expected.--
return (
<div className="player__list">
{data.map(player => (
<div className="column" key={player.id}>
<div className="card">
<img src={player.img}></img>
<h3>{player.name}</h3>
<p className="title">{player.club}</p>
<Link to={`detail/${player.id}`}>
<p><button>Detail</button></p>
</Link>
</div>
</div>
))}
</div>
)
After I changed the name "container" it was active
I am trying to utilize React Responsive Carousel. Currently, with my implementation, this code returns all objects in the array on the 1st page of the carousel (rending the point of a carousel useless). I'd like to have it so that each page of the carousel only shows one object in the array and you would need to utilize the "next" or "arrow" button via the carousel to view the next object in the array.
I tried to change profiles.map to profiles.forEach though this doesn't return any object at all.
I'm currently in a coding bootcamp, so forgive me if the code is bad altogether.
const { loading, data } = useQuery(QUERY_PROFILES);
const profiles = data?.profiles || [];
return (
<Carousel>
<div className="flex-row justify-space-between my-4">
{profiles &&
profiles.map((profile) => (
<div className="card col-12 col-xl-6" key={profile._id}>
<div className="card-body">
<h3 className="card-title">
{profile.firstName} {profile.lastName} <br />
<span className="mechLoc">
Location: {profile.location}
</span>
</h3>
<Link
className="seeProfileBtn btn btn-primary"
to={`/profiles/${profile._id}`}
>
See mechanic profile
</Link>
</div>
</div>
))}
</div>
</Carousel>
);
}
I have been messing around with a few conditional rendering methods but, I can't seem to find one that works.
<div className="tags">
{adv_event.types.map(type => (
<div className="tag" key={type.tid}>
<h5 className="body-color">Event Type:</h5>
<Link to={`/events/category/${type.slug}`} className="home-link track-click">{type.name}</Link>
</div>
))}
</div>
Right now <h5 className="body-color">Event Type:</h5> is repeated for every tag. Is there a way to show the title once without adding it before each tag?
Move it outside the loop?
<div className="tags">
{adv_event.types.length > 0 ? (<h5 className="body-color">Event Type:</h5>) : ''}
{adv_event.types.map(type => (
<div className="tag" key={type.tid}>
<Link to={`/events/category/${type.slug}`} className="home-link track-click">{type.name}</Link>
</div>
))}
</div>
I am using bootstrap with reactjs. I am getting data from a list of the array, and that data should be display on screen but when I tried I get a list of data in the vertical direction. I want to make Only 4 element in a row and then it should make another row like buttons in the calculator. I tried to do that using bootstrap grid but it did not work.
This is my code. Here I mapped through and passed data to different component
PadButtons = this.props.currentPadBank.map((drumObj, i, padBankArr) => {
return (
<PadButton
key={padBankArr[i].id}
clipId={padBankArr[i].id}
clip={padBankArr[i].url}
keyTrigger={padBankArr[i].keyTrigger}
keyCode={padBankArr[i].keyCode}
/>
);
Then here I display the data
<div id="display">
<button
className="drum-pad btn btn-secondary btn-lg"
onClick={this.playSound}
id={this.props.clipId}
>
<audio id={this.props.keyTrigger} src={this.props.clip} />
{this.props.keyTrigger}
</button>
</div>
This is my codesandbox Link
Make the following changes
In Drumpad.js
<div className="container">
<div className="row">{PadButtons}</div>
</div>
In PadButton.js
<div id={`display-${this.props.keyTrigger}`} className="col-sm-3">
<button
className="drum-pad"
onClick={this.playSound}
id={this.props.clipId}>
<audio id={this.props.keyTrigger} src={this.props.clip} />
{this.props.keyTrigger}
</button>
</div>
See updated https://codesandbox.io/s/7ymd7
Basically, you had to add col-sm-3 class on the element that is being repeated and it must be inside a wrapper row div.
I have a simple ng-repeat generating image divs. I want them to come out in rows of 4 instead of one long vertical list. How can I do this?
<div ng-repeat="artist in artists">
<div>
<h3> {({ artist.fields.title })} </h3>
<img src="{({ artist.fields.link })}" />
</div>
</div>
I believe you want to do something like this
<div style="width:800px;">
<div ng-repeat="artist in artists" style="width:200px;float:left;">
<div>
<h3> {({ artist.fields.title })} </h3>
<img src="{({ artist.fields.link })}" />
</div>
</div>
</div>
By having a container with a fixed width, and having each element inside be 1/4 of that width you can achieve what you want.
Of course, inline styles shouldn't be used in real code :)
You can use the $index property to add a tag every 4th item. Then use some CSS to display items as desired:
<div ng-repeat="artist in artists">
<div class="someClass">
<h3> {({ artist.fields.title })} </h3>
<img src="{({ artist.fields.link })}" />
</div>
<br ng-if="artist.$index % 4 == 0" />
</div>
One way is to use css properties. attach a class to the div with a float:left attribute, and insert a br tag after every 4th div
I guess you are using bootstrap?
If yes, this thread could do a help:
Bootstrap's grid columns number per row
doc for bootstrap grid layout:
http://getbootstrap.com/css/#grid-example-mixed