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.5KB |
<!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.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" 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.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<!-- Bootstrap JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" 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><form>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control form-control-lg" id="password">
</div>
</form><form>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control form-control-sm" id="email">
</div>
</form><form>
<div class="form-group">
<label for="brightness">Brightness</label>
<input type="range" class="form-control-range" id="brightness">
</div>
</form><form>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="c">
<label class="form-check-label" for="ca">当座預金</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="s">
<label class="form-check-label" for="sa">普通預金</label>
</div>
</form><form>
<div class="form-check form-check-inline">
<input type="radio" name="account" class="form-check-input" id="c">
<label class="form-check-label" for="c">当座預金</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" name="account" class="form-check-input" id="s">
<label class="form-check-label" for="s">普通預金</label>
</div>
</form><div class="container">
初春の令月にして、気淑よく風和やわらぎ、
梅は鏡前の粉を披き、蘭は珮後の香を薫す。
</div><div class="row">
<div class="col">#1</div>
<div class="col">#2</div>
</div>| Breakpoint | 接頭辞 | 画面幅 | 用途 |
|---|---|---|---|
| Extra small | xs | < 543px | スマートフォン |
| Small | sm | ≥ 544px | タブレット |
| Medium | md | ≥ 768px | モバイルパソコン |
| Large | lg | ≥ 992px | ノートパソコン |
| Extra large | el | ≥ 1120px | デスクトップパソコン |
<div class="row">
<div class="col-1">#1</div>
<div class="col-11">#2</div>
</div>
<div class="row">
<div class="col-10">#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
</li>
<li class="list-group-item">
2nd
</li>
</ul><ul class="list-group">
<li class="list-group-item active">
Active
</li>
<li class="list-group-item">
Non-active
</li>
</ul><ul class="list-group">
<li class="list-group-item">
Enabled
</li>
<li class="list-group-item disabled">
Disabled
</li>
</ul><ul class="list-group">
<li class="list-group-item">
Non-clickable
</li>
<a href="#" class="list-group-item list-group-item-action">
Clickable
</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">mt-0</div>
<div class="col mt-1">mt-1</div>
<div class="col mt-2">mt-2</div>
<div class="col mt-3">mt-3</div>
<div class="col mt-4">mt-4</div>
<div class="col mt-5">mt-5</div>
<div class="col mt-auto">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><nav class="nav">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav><nav class="nav justify-content-center">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav><nav class="nav justify-content-end">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav><nav class="nav flex-column">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav><nav class="nav nav-pills">
<a href="#" class="nav-link active">
Active
</a>
<a href="#" class="nav-link">
Link
</a>
</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 |