I started creating a blog like react application and using bootstrap grid system.
There seems to be a big space between my two columns. Is there a way to get rid of this?
A screen shot is attached.
import React from 'react';
import ReactDom from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import faker from 'faker';
//Now create a new component
const App = () => {
const myCustomStyle = {color:'green', fontSize:'50px'}
return (
<div className="container">
<div className="row">
<div class="col-3">
<img alt="avatar" src={faker.image.avatar()}></img>
</div>
<div class="col-9" >
<p><b>Alex</b><span>Today at 5.00pm</span></p>
<p>Great blog post!</p>
</div>
</div>
</div>
)
}
ReactDom.render(<App />, document.querySelector('#root'))
Use the Bootstrap 4 auto layout columns instead...
col-auto - flex shrink
col - flex grow
<div class="container">
<div class="row">
<div class="col-auto">
<img alt="avatar" src="//placehold.it/100" />
</div>
<div class="col">
<p><b>Alex</b><span>Today at 5.00pm</span></p>
<p>Great blog post!</p>
</div>
</div>
</div>
https://www.codeply.com/go/ZHoBi8rAHB
Related
I have an AppLayout component which has:
A div with the h-full utility class, to make it take the full page height.
A Background component to make a background with blur. It has three main elements:
Navbar
Outlet, which dynamically changes height
Footer
import { Outlet } from 'react-router-dom';
import Background from '../components/Background';
import Footer from '../components/Footer';
import NewNavbar from '../components/NewNavbar';
export const AppLayout = () => (
<div className='h-full'>
<Background>
<div className='min-h-full backdrop-blur-2xl flex flex-col'>
<div>
<NewNavbar />
</div>
<div className='flex-auto'>
<Outlet />
</div>
<div className=''>
<Footer />
</div>
</div>
</Background>
</div>
);
As you see, I applied flex flex-col to my "wrapper" div and flex-auto to a div wrapping my Outlet component, but this is not working. When I use straight HTML and CSS, the footer is placed correctly at the bottom of the page, and it always works.
All was so simple.
export const AppLayout = () => (
<div className='h-full'>
<Background >
<div className='min-h-screen backdrop-blur-2xl flex flex-col'>
<div>
<NewNavbar />
</div>
<div className='flex-auto'>
<Outlet />
</div>
<div>
<Footer />
</div>
</div>
</Background>
</div>
);
Replace the min-h-full to min-h-screen
I want to build a Carousel in Sitecore NextJs. I found a carousel package to do so, but it hardcodes the number of slides. Since the author will create the slides dynamically in Sitecore, my NextJs component should be smart enough to detect the number of "child slides" added to the Carousel and render them accordingly.
This is the example I found online:
import React, { Component } from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
export default class NextJsCarousel extends Component {
render() {
return (
<div>
<h2>NextJs Carousel - GeeksforGeeks</h2>
<Carousel>
<div>
<img src="/1.png" alt="image1"/>
<p className="legend">Image 1</p>
</div>
<div>
<img src="/2.png" alt="image2" />
<p className="legend">Image 2</p>
</div>
<div>
<img src="/3.png" alt="image3"/>
<p className="legend">Image 3</p>
</div>
<div>
<img src="/4.png" alt="image4"/>
<p className="legend">Image 4</p>
</div>
<div>
<img src="/5.png" alt="image5"/>
<p className="legend">Image 5</p>
</div>
</Carousel>
</div>
);
}
};
Instead, I want the Slides within the Carousel to be dynamic and use a loop based on how many slides are added under my Carousel component in Sitecore.
I am using react-slick for my carousels you may follow something similar approach as i did for your react-responsive-carousel.
My Slider Component:
export const MainSlider: FC<SliderProps> = ({
settings,
data,
type,
className,
}) => {
if (!(data.length > 0)) return null;
return (
<Fragment>
<div className="mian-slider">
<div className="container cus-container">
<div className="main-sec-slider">
<div className="img-box-back" />
<SlickSlider {...settings} className={className}>
{data.map((value, index) => {
return (
<div key={index}>
{type === "main-carousel"
? InnerSlider.Main(value)
: InnerSlider.Article(value)}
</div>
);
})}
</SlickSlider>
</div>
</div>
</div>
</Fragment>
);
};
Inside map function you can pass another component as i did with name InnerSlider which contains html code for your carousel images.
In your case you need to pass this:
<div>
<img src="/1.png" alt="image1"/>
<p className="legend">Image 1</p>
</div>
at last pass props data for MainSlider component :
<MainSlider
settings={settings}
data={[YOUR_SLIDER_DATA_ARRAY]}
type="main-carousel"
className="slider-main-text"
/>
Consider the code:
import React from 'react'
import DarkPattern from '../Assets/dark-pattern.jpg'
const Profile = () => {
return (
<div>
<section className="bg-dark text-light text-center ">
<img src='https://i.pinimg.com/originals/ba/c1/37/bac13770cdea801e72852d8dc7160295.png' className='profile-img' alt='profile-img' />
<div className="row px-5 w-75 mx-auto" >
<div className="text-start col-md-6 col-md-4">
<h1>Name</h1>
<p>Tag</p>
</div>
<div className="text-end col-md-6 col-md-4 ">
<h1>Level</h1>
<p>Score</p>
</div>
</div>
</section>
</div>
)
}
export default Profile
With the output:
and in mobile mode:
What I want to do in mobile mode is to make the text-align center only on mobile mode. I want to left column to text-align-start and the right to text-align-end. Any ideas??
P.S. Only bootstrap, don't wanna use the CSS Media Queries.
Check out the documentation around text classes:
https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment
https://getbootstrap.com/docs/5.0/utilities/text/#text-alignment
You could set your default to be center and add on a text-md-left class on medium up.
As always mobile should be your default styling and then change as you go up in size.
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>
)
}
I'm currently working on an application using Angular2.
Now that I finished my styling of the app, I want to make more themes to switch between.
I've tried setting my styleUrls to a variable and change it on click, but this doesn't work.
let styles= nightflat
#Component({
selector: 'start-app',
template: `
<div class="ui-g ui-g-nopad">
<div class="ui-g-12 ui-g-nopad" id="header">
<img src="../src/resources/icon/c2logo.png" alt="Logo" id="logo">
<button pButton icon="fa-sign-out" id="LogOut" type="button" label="LogOut" (click)="gotoLogout()"></button>
<h1></h1>
</div>
<div class="ui-g-12 ui-g-nopad">
<p-breadcrumb [model]="bcitems"></p-breadcrumb>
</div>
<div class="ui-g-12 ui-g-nopad">
<div class="ui-g-2 ui-g-nopad">
<p-panelMenu id="menu" [model]="itempanel"></p-panelMenu>
</div>
<div class="ui-g-10 ui-g-nopad" id="router-outlet">
<router-outlet> </router-outlet>
<div class="ui-g-12 ui-g-nopad">
<button pButton id="goBack" type="button" label="Zurück" (click)="goBack()"></button>
</div>
</div>
</div>
</div>
`
,
styleUrls: [styles],
directives: [Button],
providers: []
})
"nightflat" is an import from my style-urls.ts providing a css-path for every style I want to use (til now only 2):
export var nightflat = './dist/resources/scss/app.component.css'
export var froggy = './dist/resources/scss/test.component.css'
I then tried to use a function called by a Buttonclickevent to set the styles variable to another value.
setStyle(){
styles = froggy;
}
Well, that doesn't work at all.
First question: As I'm using gulp-inject - do I have to inject ALL of the style-sheets into my index.html?
Second question: How am I supposed to switch theming onclick?