Bootstrap Snippet Flex Grid using HTML CSS

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="own-flex">
              <div style="background-color:coral;">
                  Copyright (C) 2016 Microsoft Corporation. All rights reserved.
                  
              </div>
              <div style="background-color:lightblue;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div>
              <div style="background-color:khaki;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div>
              <div style="background-color:pink;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div>
              <div style="background-color:lightgrey;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div>
              <div style="background-color:pink;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div>
              <div style="background-color:red;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div>
              <div style="background-color:green;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div>
              <div style="background-color:coral;">
                  Copyright (C) 2016 Microsoft Corporation. All rights reserved.
                  
              </div>
              <div style="background-color:navyblue;">
                  Copyright (C) 2016 Microsoft Corporation. All rights reserved.
                  
              </div>
              <div style="background-color:coral;">
                  Copyright (C) 2016 Microsoft Corporation. All rights reserved.
                  
              </div>
            </div>
            
      <h2>Flex Reverse</h2>          
<div id="own-flex-reverse">
              <div style="background-color:coral;">
                  Copyright (C) 2016 Microsoft Corporation. All rights reserved.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
#own-flex {
    height: 100%;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-flex-grow: 1; /* Safari 6.1+ */
    -webkit-flex-shrink: 1; /* Safari 6.1+ */
    -webkit-flex-basis: 100px; /* Safari 6.1+ */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
    
}
#own-flex div {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
    padding: 1rem 0.5rem;
}
#own-flex-reverse {
    height: 100%;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-flex-grow: 1; /* Safari 6.1+ */
    -webkit-flex-shrink: 1; /* Safari 6.1+ */
    -webkit-flex-basis: 100px; /* Safari 6.1+ */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
    flex-direction: row-reverse;
}
#own-flex-reverse div {
    flex-grow: 1;
    flex-shrink: 1;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Flex Grid"
Bootstrap 4.1.1 Snippet by subhashy

Related: See More

Questions / Comments:

"Flex Grid" Bootstrap 4.1.1 Snippet by subhashy

Related: See More

Questions / Comments:

"Flex Grid"
Bootstrap 4.1.1 Snippet by subhashy