Bootstrap-react's Tab's will align to the left by default.
<Tabs defaultActiveKey={2} id="uncontrolled-tab-example">
<Tab eventKey={1} title="Tab 1">
Tab 1 content
</Tab>
<Tab eventKey={2} title="Tab 2">
Tab 2 content
</Tab>
</Tabs>;
You can pass a pullRight prop to make it align to the right
<Tabs pullRight defaultActiveKey={2} id="uncontrolled-tab-example">
Is there a simple way to make it centered? If not, how would you center the tabs?
On your CSS file, put the following:
ul.nav.nav-tabs {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 10px;
}
You can just add fill as a prop
<Tabs fill></Tabs>
Perhaps:
.nav-tabs > li {
float: none;
display: inline-block;
zoom: 1;
}
.nav-tabs {
text-align: center;
}
See here: http://jsfiddle.net/j751b1mb/4/
.centered-tabs > nav {
display: flex;
flex-direction: row;
justify-content: center;
}
<div className='centered-tabs'>
<Tabs></Tabs>
</div>
What worked for me was using the grid system in react-bootstrap and adding the class "nav-justified" to the column.
<Container fluid>
<Row className={"justify-content-center"}>
<Col className={"nav-justified"}>
<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
<Tab eventKey="user" title="User"></Tab>
<Tab eventKey="aboutMe" title="About Me"></Tab>
<Tab eventKey="posts" title="Posts"></Tab>
</Tabs>
</Col>
</Row>
</Container>;
Related
I have several components used to build layouts. For example, a Row, a Column, and a Vertical Align component:
export const Row = styled.div`
display: flex;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
> * {
margin-left: 10px;
&:last-child {
margin-left: 0;
}
}
`
export const Column = styled.div`
flex: 1;
`
export const VerticalAlign = styled.div`
align-items: center;
display: flex;
`
Using them together produces unnecessary nested divs:
<Row>
<Column>
<VerticalAlign>
<Icon />
<input />
</VerticalAlign>
</Column>
<Column>
<VerticalAlign>
// ...
</VerticalAlign>
</Column>
</Row>
If this were just css, I would do this:
<div class="row">
<div class="column vertical-align">
// ...
</div>
</div>
I could extend classes, but that would create an explosion of one-off components for every combination:
const VerticalAlignColumn = styled(Column)`
align-items: center;
display: flex;
`;
const VerticalAlignRow = styled(Row)`
//...
`;
Is there a way to easily combine the styles of multiple components into a single component? Something like <Row+VerticalAlign>...</Row+VerticalAlign>?
I couldn't find a way to do like you want.
And the best approach here is like you said (created extend classes) or work with props, like this:
export const Column = styled.div`
flex: 1;
${({ verticalAlign }) =>
verticalAlign &&
`
align-items: center;
display: flex;
`}
`;
<Column verticalAlign>
<Icon />
<input />
</Column>
<Column>
<Icon />
<input />
</Column>
You can also work with classes, but it has some specificities -> Styling normal React components
I know this has been answered here but for I cannot get my image to alternate. I am using Vuetify but overwriting certain styles so I think that might have something to do with it.
I have tried using both flex-flow: row-reverse; and float: right/left but without any luck..
Can anyone see an obvious error I am missing?
<template>
<v-card class="mx-auto mt-5 posts-list-item" outlined>
<v-container class="posts-list-item__content">
<v-card flat class="posts-list-item__container posts-list-item__image">
<v-img
class="pa-2 posts-list-item__img"
src="https://picsum.photos/510/300?random"
></v-img>
</v-card>
<v-card
flat
class="posts-list-item__container posts-list-item__description"
>
<v-card-title class="mb-4 posts-list-item__title">{{
post.title
}}</v-card-title>
<v-card-subtitle class="posts-list-item__subtitle">
{{ post.content }}
</v-card-subtitle>
</v-card>
</v-container>
</v-card>
</template>
<style lang="scss">
.posts-list-item {
&__content {
display: flex;
}
&__container {
&:nth-of-type(odd) {
float: left;
}
&:nth-of-type(even) {
float: right;
}
}
&__image {
width: 33%;
}
&__description {
width: 66%;
display: flex;
flex-direction: column;
align-content: stretch;
}
I had to step down from the parent and apply flex-direction: row-reverse
.posts-list {
&:nth-child(even) > .posts-list-item > .posts-list-item__content {
flex-direction: row-reverse;
}
}
I've dived last weeks a bit more into react.js with Gatsby and Prismic. I've created blog cards which I display using flex: wrap (Check the image) , now I want to display my blog cards horizontal.
If I do nowrap:
MY CODE:
Cardlist.js:
<React.Fragment>
<div className="cardslist">{children}</div>
{/* --- STYLES --- */}
<style jsx>{`
.cardslist {
text-align: center;
}
#from-width desktop {
.cardslist {
display: flex;
flex-wrap: wrap
}
}
`}</style>
</React.Fragment>
Try this: flex-direction: row;
I import the styles to the component like below. Up: It's a React component with a postcss-loader in Webpack.
import styles from './index.scss';
This is a gist from the component:
<div className={styles['container']}>
<Row type='flex' align='middle' justify='space-between'>
<Col span={24}>
... ...
</Col>
</Row>
</div>
This is the styles:
.container {
margin-left: 24px;
& .ant-row-flex.ant-row-flex-space-between.ant-row-flex-middle {
height: 100%;
display: flex;
& .ant-col-24 {
display: flex;
align-items: center;
}
}
}
Only the .container's margin-left: 24px; gets displayed in the component.
How to get .ant-row-flex.ant-row-flex-space-between.ant-row-flex-middle from Row and .ant-col-24 from Col to display too?
Having this:
<label>
<button>Create</button>
</label>
I want button to be aligned to the right like this
----------------------------
| [create]|
----------------------------
while having this:
<label>
<button>Delete</button>
<button>Update</button>
</label>
I want buttons to be in the corners
----------------------------
|[delete] [update]|
----------------------------
Without adding additional classes to the label.
You can just use margin-left: auto on last-child and that will produce desired result.
label {
display: flex;
border-bottom: 1px solid #aaa;
margin: 20px 0;
}
label button:last-child {
margin-left: auto;
}
<label>
<button>Create</button>
</label>
<label>
<button>Delete</button>
<button>Update</button>
</label>
You can do this using nothing but standard flexbox properties:
flex-direction: row-reverse - put the items in a row, start from "the end" (depends on reading direction)
justify-content: space-between - put the items as far away from each other as possible
label {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
<label>
<button>Create</button>
</label>
<label>
<button>Delete</button>
<button>Update</button>
</label>
You can use CSS Flexbox justify-content property to align your elements.
Have a look at this Codepen.
Or look at the code below for reference, also I've used <div>s in place of <label> as in the .two they are acting on both the buttons.
div {
display: flex;
background: #ddd;
padding: 10px 20px;
margin-bottom: 10px;
}
div:first-child {
justify-content: flex-end;
}
div:nth-child(2) {
justify-content: space-between;
}
<div>
<button>Create</button>
</div>
<div>
<button>Delete</button>
<button>Update</button>
</div>
Learn more about CSS Flexbox
Hope this helps!