Bootstrap Snippet 5 content in a row using flex 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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div>
<div class="products">
                <div class ="product p1">
                    <img src="https://www.waverlyhematologyoncology.com/sites/default/files/uploads/twitter-512.png" alter="product_1"/>
                    <p>some text</p>    
                    <div class="collapse"> 
                        do you want to say something!! please share your thought
                    </div>   
                </div> 
                <div class ="product p2">
                    <img src="https://www.waverlyhematologyoncology.com/sites/default/files/uploads/twitter-512.png" alter="product_2"/>
                    <p>some text</p> 
                    <div class="collapse">
                            do you want to say something!! please share your thought
                    </div>    
                </div>
                <div class ="product p3">
                    <img src="https://www.waverlyhematologyoncology.com/sites/default/files/uploads/twitter-512.png" alter="product_3"/>
                    <p>some text</p>
                    <div class="collapse">
                        do you want to say something!! please share your thought
                    </div>       
                </div>
                <div class ="product p4">
                    <img src="https://www.waverlyhematologyoncology.com/sites/default/files/uploads/twitter-512.png" alter="product_4"/>
                    <p>some text</p>
                    <div class="collapse">
                        do you want to say something!! please share your thought
                    </div>     
                </div>
                <div class ="product p5">
                        <img src="https://www.waverlyhematologyoncology.com/sites/default/files/uploads/twitter-512.png" alter="product_5"/>
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
div{
    display: flex;
    flex-direction: column;
}
div .products{
    display: flex;
    flex-direction: row;
    text-align: center;
    flex-wrap: wrap;
    height: 400px;
    justify-content: space-around;
}
div .products .product{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 300px;
}
div .products .product img{
    height: 150px;
    width: 150px;
    border-radius:50%; 
}
div .products .product p{
    font-size: 1em;
}
div .products .product .collapse{
    display: none;
}
div .products .product:hover img{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"5 content in a row using flex"
Bootstrap 3.0.0 Snippet by akhtarvahid

Related: See More

Questions / Comments:

"5 content in a row using flex" Bootstrap 3.0.0 Snippet by akhtarvahid

Related: See More

Questions / Comments:

"5 content in a row using flex"
Bootstrap 3.0.0 Snippet by akhtarvahid