Bootstrapのグリッドシステムは、コンテンツのレイアウトと配置に、一連のコンテナ、行、列を使用します。 フレックスボックス で構築されており、完全にレスポンシブです。以下は、グリッドの構成方法の例と詳細な説明です。
フレックスボックスを初めて使用するか、よく知らない場合は、CSS Tricksフレックスボックスガイド を読んで、背景、用語、ガイドライン、コードスニペットを確認してください。
コンテナ
コンテナは、サイトのコンテンツを中央揃えにして水平方向にパディングするための手段を提供します。レスポンシブなピクセル幅にはContainerを使用します。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
return (
<Container>
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
);
}
export default ContainerExample;
Fluidコンテナ
すべてのビューポートとデバイスサイズで幅：100％にするには、<Container fluid />を使用できます。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
return (
<Container fluid>
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
);
}
export default ContainerFluidExample;
fluid propにブレークポイントを設定できます。ブレークポイント（sm、md、lg、xl、xxl）に設定すると、指定されたブレークポイントまでContainerがFluidとして設定されます。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample() {
return (
<Container fluid="md">
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
);
}
export default ContainerFluidBreakpointExample;
自動レイアウト列
列幅が指定されていない場合、Colコンポーネントは等幅の列をレンダリングします
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
return (
<Container>
<Row>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
</Row>
<Row>
<Col>1 of 3</Col>
<Col>2 of 3</Col>
<Col>3 of 3</Col>
</Row>
</Container>
);
}
export default AutoLayoutExample;
1つの列幅の設定
フレックスボックスグリッド列の自動レイアウトでは、1つの列の幅を設定し、兄弟列をその周りに自動的にサイズ変更することもできます。定義済みのグリッドクラス（以下に示す）、グリッドmixin、またはインライン幅を使用できます。中央の列の幅に関係なく、他の列のサイズが変更されることに注意してください。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutSizingExample() {
return (
<Container>
<Row>
<Col>1 of 3</Col>
<Col xs={6}>2 of 3 (wider)</Col>
<Col>3 of 3</Col>
</Row>
<Row>
<Col>1 of 3</Col>
<Col xs={5}>2 of 3 (wider)</Col>
<Col>3 of 3</Col>
</Row>
</Container>
);
}
export default AutoLayoutSizingExample;
可変幅コンテンツ
コンテンツの自然な幅に基づいて列のサイズを変更するには、列の値（任意のブレークポイントサイズ）をautoに設定します。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutVariableExample() {
return (
<Container>
<Row className="justify-content-md-center">
<Col xs lg="2">
1 of 3
</Col>
<Col md="auto">Variable width content</Col>
<Col xs lg="2">
3 of 3
</Col>
</Row>
<Row>
<Col>1 of 3</Col>
<Col md="auto">Variable width content</Col>
<Col xs lg="2">
3 of 3
</Col>
</Row>
</Container>
);
}
export default AutoLayoutVariableExample;
レスポンシブグリッド
Colを使用すると、6つのブレークポイントサイズ（xs、sm、md、lg、xl、xxl）で列幅を指定できます。すべてのブレークポイントについて、スパンする列の数を指定するか、自動レイアウト幅にpropを<Col lg={true} />に設定できます。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ResponsiveAutoExample() {
return (
<Container>
<Row>
<Col sm={8}>sm=8</Col>
<Col sm={4}>sm=4</Col>
</Row>
<Row>
<Col sm>sm=true</Col>
<Col sm>sm=true</Col>
<Col sm>sm=true</Col>
</Row>
</Container>
);
}
export default ResponsiveAutoExample;
ブレークポイントを混在させて一致させることで、画面サイズに応じて異なるグリッドを作成することもできます。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ResponsiveExample() {
return (
<Container>
{}
<Row>
<Col xs={12} md={8}>
xs=12 md=8
</Col>
<Col xs={6} md={4}>
xs=6 md=4
</Col>
</Row>
{}
<Row>
<Col xs={6} md={4}>
xs=6 md=4
</Col>
<Col xs={6} md={4}>
xs=6 md=4
</Col>
<Col xs={6} md={4}>
xs=6 md=4
</Col>
</Row>
{}
<Row>
<Col xs={6}>xs=6</Col>
<Col xs={6}>xs=6</Col>
</Row>
</Container>
);
}
export default ResponsiveExample;
Colブレークポイントpropには、オフセットと順序付け効果を指定するための、より複雑なobject propフォーム：{span: number, order: number, offset: number}もあります。
orderプロパティを使用して、コンテンツの**表示順序**を制御できます。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function OrderingExample() {
return (
<Container>
<Row>
<Col xs>First, but unordered</Col>
<Col xs={{ order: 12 }}>Second, but last</Col>
<Col xs={{ order: 1 }}>Third, but second</Col>
</Row>
</Container>
);
}
export default OrderingExample;
orderプロパティは、first（order: -1）とlast（order: $columns+1）もサポートしています。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function OrderingFirstLastExample() {
return (
<Container>
<Row>
<Col xs={{ order: 'last' }}>First, but last</Col>
<Col xs>Second, but unordered</Col>
<Col xs={{ order: 'first' }}>Third, but first</Col>
</Row>
</Container>
);
}
export default OrderingFirstLastExample;
グリッド列をオフセットするには、offset値を設定するか、より一般的なレイアウトの場合はマージンクラスユーティリティを使用します。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function OffsettingExample() {
return (
<Container>
<Row>
<Col md={4}>md=4</Col>
<Col md={{ span: 4, offset: 4 }}>{`md={{ span: 4, offset: 4 }}`}</Col>
</Row>
<Row>
<Col md={{ span: 3, offset: 3 }}>{`md={{ span: 3, offset: 3 }}`}</Col>
<Col md={{ span: 3, offset: 3 }}>{`md={{ span: 3, offset: 3 }}`}</Col>
</Row>
<Row>
<Col md={{ span: 6, offset: 3 }}>{`md={{ span: 6, offset: 3 }}`}</Col>
</Row>
</Container>
);
}
export default OffsettingExample;
行での列幅の設定
Rowを使用すると、6つのブレークポイントサイズ（xs、sm、md、lg、xl、xxl）で列幅を指定できます。すべてのブレークポイントについて、横に収まる列の数を指定できます。autoを指定して、列を自然な幅に設定することもできます。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function RowColLayoutExample() {
return (
<Container>
<Row xs={2} md={4} lg={6}>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
</Row>
<Row xs={1} md={2}>
<Col>1 of 3</Col>
<Col>2 of 3</Col>
<Col>3 of 3</Col>
</Row>
<Row xs="auto">
<Col>1 of 3</Col>
<Col>2 of 3</Col>
<Col>3 of 3</Col>
</Row>
</Container>
);
}
export default RowColLayoutExample;
大きな画面で表示する場合、Row列幅は、低いブレークポイントで設定されたCol幅をオーバーライドすることに注意してください。 <Col xs={6} />サイズは、中規模以上の画面では<Row md={4} />によってオーバーライドされます。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function RowColLayoutColWidthBreakpointExample() {
return (
<Container>
<Row md={4}>
<Col>1 of 3</Col>
<Col xs={6}>2 of 3</Col>
<Col>3 of 3</Col>
</Row>
</Container>
);
}
export default RowColLayoutColWidthBreakpointExample;
API
コンテナ