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.
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>
);
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
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 want to create the same design like chrome settings page
https://www.pcworld.com/article/3162716/software/how-to-switch-to-chromes-material-design-settings-page-for-an-easier-experience.html
I do not manage to put the md-switch at the right and in static position like chrome settings
I do manage to put the md-switch in right to the title but I need it always in the middle of the card stick to right.
Image of my result: (current design)
<md-card md-theme="{{ showDarkTheme ? 'dark-purple' : 'default' }}" md-theme-watch>
<div class="option-item">
<div class="option-item-header">
<div class="option-item-header-title">
title
</div>
</div>
<div class="clear"></div>
<div class="option-body">
<p>text</p>
</div>
</div>
<div class="option-switch">
<md-switch ng-model="vm.model" aria-label="active" ng-change="function()">
</md-switch>
</div>
</md-card>