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.
Related
I'm a beginner in React Js, and I'm using React Js with BootStrap 5.2.0
My product cards are not getting displayed in a row
I want to display 4 product cards in a row.
Adding Codes:
Home Page code:
<div className="container-fluid mb-2">
<Carousel />
<div className="mt-2">
<div className="row">
<div className="col-md-2">
<GetAllCategories />
</div>
<div className="col-md-10">
<div className="row row-cols-1 row-cols-md-4 g-4">
<div className="col">
{products.map((product) => {
return <ProductCard item={product} />;
})}
</div>
</div>
</div>
</div>
</div>
</div>
PRODUCT CARD CODE:
const ProductCard = (product) => {
return (
<div class="card border-color rounded-card card-hover product-card custom-bg">
<img
src={"http://localhost:8080/api/product/" + product.item.imageName}
class="card-img-top rounded mx-auto d-block m-2"
alt="img"
style={{
maxHeight: "270px",
maxWidth: "100%",
width: "auto",
}}
/>
<div class="card-body text-color">
<h5 class="card-title d-flex justify-content-between">
<div>
<b>{product.item.title}</b>
</div>
<CategoryNavigator
item={{
id: product.item.category.id,
title: product.item.category.title,
}}
/>
</h5>
<p className="card-text">
<b>{product.item.description}</b>
</p>
</div>
<div class="card-footer">
<div className="text-center text-color">
<p>
<span>
<h4>Price : ₹{product.item.price}</h4>
</span>
</p>
</div>
<div className="d-flex justify-content-between">
<Link
to={`/product/${product.item.id}/category/${product.item.category.id}`}
className="btn bg-color custom-bg-text"
>
Add to Cart
</Link>
<p class="text-color">
<b>
<i>Stock :</i> {product.item.quantity}
</b>
</p>
</div>
</div>
</div>
);
};
export default ProductCard;
From the past 4 days, I'm struggling to resolve this issue.
Please help me to fix this.
Thank You
You need to move <div className="col"> from home page to ProductCard as first element in return statement. Sample code at https://codesandbox.io/s/falling-thunder-swzukd
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>
)
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.
So I want to align the text next to the image, but here is what I get
Here is my code
<Card>
<div class='container'>
<div className='row'>
<div className='col-12 col-md-5 mt-3'>
<CardImg src={history.image} alt={history.name} />
</div>
</div>
<div className='row'>
<div className='col-12 col-md-5 mt-3'>
<CardBody>
<CardText>{history.description}</CardText>
</CardBody>
</div>
</div>
</div>
</Card>
Any ideas?
Thanks,
Theo.
Try using flex property to container!
Using CSS:
.container {
display: flex;
}
I think you are using Bootstrap, this might be helpful to you!
Flex Property Bootstrap