Card Image
<div class="card" style="width:20rem;">
<img src="card.png" class="card-img-top">
<div class="card-body">Body</div>
</div>
Body
BootstrapとはTwitterが開発したCSSフレームワークで、CSSフレームワークの中では1番ポピュラーな存在です。 この記事では、Bootstrapの使い方をサンプルを交えて解説します。この記事自体もBootstrapを使っています。
| Item | Description |
|---|---|
| URL | https://getbootstrap.com/ |
| License | MIT |
| Module | Size |
|---|---|
| bootstrap.min.css | 156KB |
| bootstrap.min.js | 58.7KB |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- Bootstrap JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html><span class="badge badge-primary">Primary</span>
<a href="#" class="badge badge-primary">Primary</a><span class="badge badge-secondary">Secondary</span>
<a href="#" class="badge badge-secondary">Secondary</a><span class="badge badge-success">Success</span>
<a href="#" class="badge badge-success">Success</a><span class="badge badge-danger">Danger</span>
<a href="#" class="badge badge-danger">Danger</a><span class="badge badge-warning">Warning</span>
<a href="#" class="badge badge-warning">Warning</a><span class="badge badge-light">Light</span>
<a href="#" class="badge badge-light">Light</a><span class="badge badge-pill badge-primary">Badge</span>
<a href="#" class="badge badge-pill badge-primary">Badge</a><a href="#" class="btn btn-primary" role="button">Link</a>
<button type="button" class="btn btn-secondary">Button</button>
<input type="button" class="btn btn-success" value="Input">
<input type="submit" class="btn btn-danger" value="Submit">
<input type="reset" class="btn btn-warning" value="Reset"><button type="button" class="btn btn-outline-primary">
Button
</button><button type="button" class="btn btn-lg btn-primary">
Button
</button><button type="button" class="btn btn-sm btn-primary">
Button
</button><button type="button" class="btn btn-block btn-primary">
Button
</button><button type="button" class="btn btn-primary" disabled>
Button
</button><div class="card">
<div class="card-body">Body</div>
</div><div class="card">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p>Body</p>
</div>
</div>Body
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
</div><div class="card">
<div class="card-body">Body</div>
<div class="card-footer">Footer</div>
</div><div class="card" style="width:20rem;">
<img src="card.png" class="card-img-top">
<div class="card-body">Body</div>
</div><form>
<div class="form-group">
<label for="last_name">Last name</label>
<input type="text" class="form-control" id="last_name">
</div>
</form><div class="container">
初春の令月にして、気淑よく風和やわらぎ、
梅は鏡前の粉を披き、蘭は珮後の香を薫す。
</div><div class="row">
<div class="col">#1</div>
<div class="col">#2</div>
</div><div class="row">
<div class="col-1">#1</div>
<div class="col-11">#2</div>
</div>
<div class="row">
<div class="col">#3</div>
<div class="col-1">#4</div>
</div><div class="row">
<div class="col-2">#1</div>
<div class="col-10">#2</div>
</div>
<div class="row">
<div class="col">#3</div>
<div class="col-2">#4</div>
</div><div class="text-primary">text-primary</div>
<div class="text-secondary">text-secondary</div>
<div class="text-success">text-success</div>
<div class="text-danger">text-danger</div>
<div class="text-warning">text-warning</div>
<div class="text-info">text-info</div>
<div class="text-light bg-dark">text-light</div>
<div class="text-dark">text-dark</div>
<div class="text-body">text-body</div>
<div class="text-muted">text-muted</div>
<div class="text-white bg-dark">text-white</div>
<div class="text-black-50">text-black-50</div>
<div class="text-white-50">text-white-50</div><div class="bg-primary">bg-primary</div>
<div class="bg-secondary">bg-secondary</div>
<div class="bg-success">bg-success</div>
<div class="bg-danger">bg-danger</div>
<div class="bg-warning">bg-warning</div>
<div class="bg-info">bg-info</div>
<div class="bg-light">bg-light</div>
<div class="bg-dark">bg-dark</div>
<div class="bg-white">bg-white</div>
<div class="bg-transparent">bg-transparent</div><img class="img-fluid" src="200x200.jpg">
<img class="img-thumbnail" src="200x200.jpg"><img class="rounded" src="200x200.jpg"><img class="float-left" src="200x200.jpg"><img class="float-right" src="200x200.jpg"><img class="mx-auto d-block" src="200x200.jpg"><div class="text-center">
<img src="200x200.jpg">
</div><ul class="list-group">
<li class="list-group-item">1st item</li>
<li class="list-group-item">2nd item</li>
</ul><ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Non-active item</li>
</ul><ul class="list-group">
<li class="list-group-item">Enabled item</li>
<li class="list-group-item disabled">Disabled item</li>
</ul><ul class="list-group">
<li class="list-group-item">Non-clickable item</li>
<a href="#" class="list-group-item list-group-item-action">Clickable item</a>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-secondary">Secondary item</li>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-success">Success item</li>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-warning">Warning item</li>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-info">Info item</li>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-light">Light item</li>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
</ul><div class="row">
<div class="col mt-0 bg-info">mt-0</div>
<div class="col mt-1 bg-info">mt-1</div>
<div class="col mt-2 bg-info">mt-2</div>
<div class="col mt-3 bg-info">mt-3</div>
<div class="col mt-4 bg-info">mt-4</div>
<div class="col mt-5 bg-info">mt-5</div>
<div class="col mt-auto bg-info">mt-auto</div>
</div><div class="mr-0 bg-info">mr-0</div>
<div class="mr-1 bg-info">mr-1</div>
<div class="mr-2 bg-info">mr-2</div>
<div class="mr-3 bg-info">mr-3</div>
<div class="mr-4 bg-info">mr-4</div>
<div class="mr-5 bg-info">mr-5</div>
<div class="mr-auto bg-info">mr-auto</div><div class="row">
<div class="col mb-0 bg-info">mb-0</div>
<div class="col mb-1 bg-info">mb-1</div>
<div class="col mb-2 bg-info">mb-2</div>
<div class="col mb-3 bg-info">mb-3</div>
<div class="col mb-4 bg-info">mb-4</div>
<div class="col mb-5 bg-info">mb-5</div>
<div class="col mb-auto bg-info">mb-auto</div>
</div><div class="ml-0 bg-info">ml-0</div>
<div class="ml-1 bg-info">ml-1</div>
<div class="ml-2 bg-info">ml-2</div>
<div class="ml-3 bg-info">ml-3</div>
<div class="ml-4 bg-info">ml-4</div>
<div class="ml-5 bg-info">ml-5</div>
<div class="ml-auto bg-info">ml-auto</div><div class="mx-0 bg-info">mx-0</div>
<div class="mx-1 bg-info">mx-1</div>
<div class="mx-2 bg-info">mx-2</div>
<div class="mx-3 bg-info">mx-3</div>
<div class="mx-4 bg-info">mx-4</div>
<div class="mx-5 bg-info">mx-5</div>
<div class="mx-auto bg-info">mx-auto</div><div class="row">
<div class="col my-0 bg-info">my-0</div>
<div class="col my-1 bg-info">my-1</div>
<div class="col my-2 bg-info">my-2</div>
<div class="col my-3 bg-info">my-3</div>
<div class="col my-4 bg-info">my-4</div>
<div class="col my-5 bg-info">my-5</div>
<div class="col my-auto bg-info">my-auto</div>
</div><nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="/">SE学院</a>
</li>
<li class="breadcrumb-item">
<a href="/css/">CSS</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Bootstrap
</li>
</ol>
</nav><div class="row">
<div class="col pt-0 bg-info">pt-0</div>
<div class="col pt-1 bg-info">pt-1</div>
<div class="col pt-2 bg-info">pt-2</div>
<div class="col pt-3 bg-info">pt-3</div>
<div class="col pt-4 bg-info">pt-4</div>
<div class="col pt-5 bg-info">pt-5</div>
<div class="col pt-auto bg-info">pt-auto</div>
</div><div class="pl-0 bg-info">pl-0</div>
<div class="pl-1 bg-info">pl-1</div>
<div class="pl-2 bg-info">pl-2</div>
<div class="pl-3 bg-info">pl-3</div>
<div class="pl-4 bg-info">pl-4</div>
<div class="pl-5 bg-info">pl-5</div>
<div class="pl-auto bg-info">pl-auto</div><div class="shadow mb-5">Shadow</div><div class="shadow-sm mb-5">Small shadow</div><div class="shadow-lg mb-5">Large shadow</div><table class="table">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |
<table class="table table-dark">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |
<table class="table table-striped">
<caption>Breakpoints</caption>
<thead>
<tr><th>Breakpoint</th><th>Width</th></tr>
</thead>
<tbody>
<tr><td>sm</td><td>≥ 576px</td></tr>
<tr><td>md</td><td>≥ 768px</td></tr>
<tr><td>lg</td><td>≥ 992px</td></tr>
<tr><td>xl</td><td>≥ 1200px</td></tr>
</tbody>
</table>| Breakpoint | Width |
|---|---|
| sm | ≥ 576px |
| md | ≥ 768px |
| lg | ≥ 992px |
| xl | ≥ 1200px |
<table class="table table-bordered">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |
<table class="table table-borderless">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |
<table class="table table-hover">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |
<table class="table table-sm">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |
<table class="table">
<caption>Table classes</caption>
<thead class="thead-dark">
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |
<table class="table">
<caption>Table classes</caption>
<thead class="thead-light">
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |