---
# System prepended metadata

title: Bootstrap flex、justify-content Utilities-Spacing
tags: [Bootstrap]

---

# Bootstrap flex、justify-content Utilities-Spacing

###### tags: `Bootstrap`
---

### flex





### Justify content
![](https://i.imgur.com/h15VzhL.png)


### Utilities ==> Spacing
![](https://i.imgur.com/Box9ukj.png)
https://getbootstrap.com/docs/4.4/utilities/spacing/

### 背景顏色
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark


### BS選單(左右兩邊推)
```htmlmixed=
<!-- 選單左右推~ ml-auto & mr-auto-->
	<div class="row">
		<!-- ml-auto -->
		<div class="display-4  mt-5">ml-auto</div>
		<p class="mt-5">justify-content-end</p>
		<div class="col-12">
			<div class="d-flex bg-secondary justify-content-end">
				<div class="bg-info text-white border py-3 px-2">navbar 001.</div>
				<div class="bg-info text-white border py-3 px-2 ml-auto">[ml-auto] navbar  002.</div>
				<div class="bg-info text-white border py-3 px-2">navbar 003.</div>
			</div>
		</div>
		<hr>
		<!-- mr-auto -->
		<div class="display-4 mt-5">mr-auto</div>
		<p class="mt-5">justify-content-start</p>
		<div class="col-12">
			<div class="d-flex bg-secondary justify-content-start mt-3">
				<div class="bg-success text-white border py-3 px-2">navbar 001.</div>
				<div class="bg-success text-white border py-3 px-2 mr-auto">[mr-auto] navbar  002.</div>
				<div class="bg-success text-white border py-3 px-2">navbar 003.</div>
			</div>
		</div>
		<hr>
	</div>
```
* lex-wrap (nowrap, wrap, wrap-reverse)
* nowrap: 不要換行
* wrap: 空間滿了換行
* wrap-reverse: 空間滿了換行並反轉


---




---
<span class="code1"></span>
<style>
h2 {
    color: #2383B8;
}
h3 {
    color: #1AA340;
}
h4 {
    color: white;
    background-color: #2383B8;
    padding:8px;
}

.code1 {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    font-family:'Fira Code';
}
.code {
    padding: 2px 4px;
    font-size: 90%;
    font-family:'Fira Code';
}
</style>