align
v1.1.1arrow_drop_downv1.1.1
v1.1.0
v1.0.7
v1.0.6
v1.0.5
v1.0.4
v1.0.3
v1.0.2
v1.0.1
v1.0.0
STATUS
Passing
DOWNLOADS
3,243
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
4 years ago
SIZE
3 KB
1 contributor
Like
Install align as a package?
Copied
npm i @bit/bit.base-ui.layout.align
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.cloud
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
and packages in Bit or NPM to the example. any of the 1 million componentstoggle layout
modifieddraft
chevron_left
chevron_right
Align
A set of CSS components to align elements.
text
Same as css property text-align.
import { text } from '@bit/bit.base-ui.layout.align';
function A() {
return <div className={text.center}>a</div>;
}
Breakpoints
Align elements according to html breakpoints.
import { text } from '@bit/bit.base-ui.layout.align';
function B() {
return <div className={classNames(text.left, text.md.center text.l.left)}>
b
</div>
}
Margin center
Same as margin-left: auto; margin-right: auto
.
import { marginCenter } from '@bit/bit.base-ui.layout.align';
function C() {
return <div className={classNames(marginCenter)}>this is centered</div>;
}
Breakpoints:
- (default)
(all)
- xs
360px
- sm
480px
- md
768px
- l
920px
- lg
1080px
- xl
1440px