bootstrap 스마트폰 대응을 의식

참고 사이트

jumbotron 톱 페이지하는 캐치 카피의 녀석 && container

container

|  | Extra small |
|:--|:--|:--|:--|:--|:--|
| <576px | Small |
| ≥576px | Medium |
| ≥768px | Large |
| ≥992px | Extra large |
| ≥1200px |
| max-width | 100% | 540px | 720px | 960px | 1140px |

그리드 시스템

.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px) # スマホ横幅は750pxでOKらしい 2018年の記事
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px) # macpro width 1400  1/2 700

<div class="container">
      <div class="row">
        <div class="col-sm-4">
          <h3>column</h3>
          <p>hello</p>
        </div>
        <div class="col-sm-4">
          <h3>head</h3>
          <p>hello</p>
        </div>
        <div class="col-sm-4">
         <h3>yahoo</h3>
         <p>hello</p>
        </div>
      </div>

 <div class="container">
      <div class="row">
        <div class="col-sm-4 col-3">
          <h3>column</h3>
          <p>hello</p>
        </div>
        <div class="col-sm-4 col-3">
          <h3>head</h3>
          <p>hello</p>
        </div>
        <div class="col-sm-4 col-3">
         <h3>yahoo</h3>
         <p>hello</p>
        </div>
      </div>
    </div>

 <div class="container">
      <div class="row">
        <div class="col">
          <h3>column</h3>
          <p>hello</p>
        </div>
        <div class="col">
          <h3>head</h3>
          <p>hello</p>
        </div>
        <div class="col">
         <h3>yahoo</h3>
         <p>hello</p>
        </div>
        <div class="col">
            <h3>head</h3>
            <p>hello</p>
          </div>
          <div class="col">
           <h3>yahoo</h3>
           <p>hello</p>
          </div>
      </div>
    </div>

tutorial