Bootstrap ~レイアウト編~

index.html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="title icon" type="image/png" href="images/title-img.png"/>
    <!-- Bootstrap CSS -->
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> -->
    <!-- fontawesome　-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
    <title>Learning Bootstrap</title>
    
    <style>
      .container {
        margin-top: 50px;
        padding: 20px 0;
        background-color: orange;
      }
      
      .item {
        padding: 30px;
        margin: 10px;
        background: #093840;
        font-size: 30px;
        color: #fff;
      }
    </style>
  </head>
  <body>    

    <div class="container">
      <div class="item item1">Box1</div>
      <div class="item item2">Box2</div>
      <div class="item item3">Box3</div>
      <div class="item item4">Box4</div>
      <div class="item item5">Box5</div>
    </div>
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

index.html

<head>

<title>Learning Bootstrap</title>

<style>

.container {

margin-top: 50px;

padding: 20px 0;

background-color: orange;

}

.item {

padding: 30px;

margin: 10px;

background: #093840;

font-size: 30px;

color: #fff;

}

</style>

</head>

<body>

</div>

</body>

</html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="title icon" type="image/png" href="images/title-img.png"/>
    <!-- Bootstrap CSS -->
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> -->
    <!-- fontawesome　-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
    <title>Learning Bootstrap</title>
    
    <style>
      .container-flex {
        margin-top: 50px;
        padding: 20px 0;
        background-color: orange;
        display: flex; /* new */
      }
      
      .item {
        padding: 27px;
        margin: 5px;
        background: #093840;
        font-size: 30px;
        color: #fff
      }
    </style>
  </head>
  <body>    

    <div class="container-flex">
      <div class="item item1">Box1</div>
      <div class="item item2">Box2</div>
      <div class="item item3">Box3</div>
      <div class="item item4">Box4</div>
      <div class="item item5">Box5</div>
    </div>
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

<head>

<title>Learning Bootstrap</title>

<style>

.container-flex {

margin-top: 50px;

padding: 20px 0;

background-color: orange;

display: flex; /* new */

}

.item {

padding: 27px;

margin: 5px;

background: #093840;

font-size: 30px;

color: #fff

}

</style>

</head>

<body>

</div>

</body>

</html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="title icon" type="image/png" href="images/title-img.png"/>
    <!-- Bootstrap CSS -->
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> -->
    <!-- fontawesome　-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
    <title>Learning Bootstrap</title>
    
    <style>
      .container-flex2 {
        margin-top: 50px;
        padding: 20px 0;
        background-color: orange;
        display: flex;
        flex-direction: row-reverse; /* new */
      }
      
      .item {
        padding: 27px;
        margin: 5px;
        background: #093840;
        font-size: 30px;
        color: #fff
      }
    </style>
  </head>
  <body>    

    <div class="container-flex2">
      <div class="item item1">Box1</div>
      <div class="item item2">Box2</div>
      <div class="item item3">Box3</div>
      <div class="item item4">Box4</div>
      <div class="item item5">Box5</div>
    </div>
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<head>

<title>Learning Bootstrap</title>

<style>

.container-flex2 {

margin-top: 50px;

padding: 20px 0;

background-color: orange;

display: flex;

flex-direction: row-reverse; /* new */

}

.item {

padding: 27px;

margin: 5px;

background: #093840;

font-size: 30px;

color: #fff

}

</style>

</head>

<body>

</div>

</body>

</html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="title icon" type="image/png" href="images/title-img.png"/>
    <!-- Bootstrap CSS -->
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> -->
    <!-- fontawesome　-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
    <title>Learning Bootstrap</title>
    
    <style>
      .container-flex4 {
        margin-top: 50px;
        padding: 20px 0;
        background-color: orange;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
      
      .item {
        padding: 50px;
        margin: 5px;
        background: #093840;
        font-size: 30px;
        color: #fff
      }
    </style>
  </head>
  <body>    

    <div class="container-flex4">
      <div class="item item1">Box1</div>
      <div class="item item2">Box2</div>
      <div class="item item3">Box3</div>
      <div class="item item4">Box4</div>
      <div class="item item5">Box5</div>
    </div>
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

<head>

<title>Learning Bootstrap</title>

<style>

.container-flex4 {

margin-top: 50px;

padding: 20px 0;

background-color: orange;

display: flex;

flex-direction: row;

flex-wrap: wrap;

}

.item {

padding: 50px;

margin: 5px;

background: #093840;

font-size: 30px;

color: #fff

}

</style>

</head>

<body>

</div>

</body>

</html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="title icon" type="image/png" href="images/title-img.png"/>
    <!-- Bootstrap CSS -->
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> -->
    <!-- fontawesome　-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
    <title>Learning Bootstrap</title>
    
    <style>
      .container-flex4 {
        margin-top: 50px;
        padding: 20px 0;
        background-color: orange;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
      }
      
      .item-parent {
        padding: 10px;
        margin: 5px;
        background: #093840;
        font-size: 30px;
        color: #fff
      }
    </style>
  </head>
  <body>    

    <div class="container-flex4">
      <div class="item-parent item1">Box1</div>
      <div class="item-parent item2">Box2</div>
      <div class="item-parent item3">Box3</div>
      <div class="item-parent item4">Box4</div>
      <div class="item-parent item5">Box5</div>
    </div>
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<head>

<title>Learning Bootstrap</title>

<style>

.container-flex4 {

margin-top: 50px;

padding: 20px 0;

background-color: orange;

display: flex;

flex-direction: row;

flex-wrap: nowrap;

justify-content: center;

}

.item-parent {

padding: 10px;

margin: 5px;

background: #093840;

font-size: 30px;

color: #fff

}

</style>

</head>

<body>

</div>

</body>

</html>

<div class="container">
      <div class="row">
       <div class="col btn btn-outline-primary">Box1</div>
       <div class="col btn btn-outline-primary">Box1</div>
       <div class="col btn btn-outline-primary">Box1</div>
       <div class="col btn btn-outline-primary">Box1</div>
       <div class="col btn btn-outline-primary">Box1</div>
       <div class="col btn btn-outline-primary">Box1</div>
       <div class="col btn btn-outline-primary">Box1</div>
       <div class="col btn btn-outline-primary">Box1</div>
       <div class="col btn btn-outline-primary">Box1</div>
       <div class="col btn btn-outline-primary">Box1</div>
       <div class="col btn btn-outline-primary">Box1</div>
       <div class="col btn btn-outline-primary">Box1</div>
      </div>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

</div>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="title icon" type="image/png" href="images/title-img.png"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <!-- fontawesome　-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
    <title>Learning Bootstrap</title>
    
  </head>
  <body>    

    <div class="container">
      <div class="row">
        <div class="col btn btn-outline-primary">Box1</div>
        <div class="col btn btn-outline-primary">Box1</div>
        <div class="col btn btn-outline-primary">Box1</div>
        <div class="col btn btn-outline-primary">Box1</div>
        <div class="col btn btn-outline-primary">Box1</div>
        <div class="col btn btn-outline-primary">Box1</div>
        <div class="col btn btn-outline-primary">Box1</div>
        <div class="col btn btn-outline-primary">Box1</div>
        <div class="col btn btn-outline-primary">Box1</div>
        <div class="col btn btn-outline-primary">Box1</div>
        <div class="col btn btn-outline-primary">Box1</div>
        <div class="col btn btn-outline-primary">Box1</div>
      </div>
      <div class="row">
        <div class="col-2 btn btn-outline-primary">Box2</div>
        <div class="col-4 btn btn-outline-primary">Box4</div>
        <div class="col-6 btn btn-outline-primary">Box6</div>
      </div>
      <div class="row">
        <div class="col-5 btn btn-outline-primary">Box5</div>
        <div class="col-3 btn btn-outline-primary">Box3</div>
        <div class="col-2 btn btn-outline-primary">Box2</div>
        <div class="col-2 btn btn-outline-primary">Box2</div>
      </div>
      <div class="row">
        <div class="col-4 btn btn-outline-primary">Box4</div>
        <div class="col-1 btn btn-outline-primary">Box1</div>
        <div class="col-2 btn btn-outline-primary">Box2</div>
        <div class="col-3 btn btn-outline-primary">Box3</div>
        <div class="col-2 btn btn-outline-primary">Box2</div>
      </div>
    </div>
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

<head>

<title>Learning Bootstrap</title>

</head>

<body>

</div>

</div>

</div>

</div>

</body>

</html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="title icon" type="image/png" href="images/title-img.png"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <!-- fontawesome　-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
    <title>Learning Bootstrap</title>
    
  </head>
  <body>    

    <div class="container bg-secondary">
      <div class="row">
        <div class="col-md-4 col-sm-3 bg-primary">FIRST</div>
        <div class="col-md-4 col-sm-4 bg-warning">SECOND</div>
        <div class="col-md-4 col-sm-5 bg-danger">THIRED</div>
      </div> 
    </div>
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<head>

<title>Learning Bootstrap</title>

</head>

<body>

<div class="col-md-4 col-sm-3 bg-primary">FIRST</div>

<div class="col-md-4 col-sm-4 bg-warning">SECOND</div>

<div class="col-md-4 col-sm-5 bg-danger">THIRED</div>

</div>

</body>

</html>

Flexbox

Bootstrap Grid System

参考書籍

次回

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

2019年9月
月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Flexbox

Bootstrap Grid System

参考書籍

次回

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

[Go言語]flagパッケージでコマンドライン引数を受け取る

[golang]regexpを使って文中からURLを取得する

[初学者向け]Helmを学ぼう!~Helm Chartの依存/ライブラリ化/…

[Golang]Bridge パターンを学ぼう!~Version 2~

[Swagger権限エラー]dockerで権限のあるフォルダにアクセスしよう…

CSSでモバイルタブナビゲーションをスタイリングしよう!

[Go言語/JavaScript]WebSocketsでチャットアプリを実装…

CSSで要素をページ中央に持っていくもっとも"簡単"な方法

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル