Bootstrap Snippet wo flex center 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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ---------->
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="bucket">
  
  
    <div class="left-div left-text">
      
        <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive" />
       
        <div class="card-img text">
            <h4 class="card-title" style="text-align:center;padding-bottom:5px;">Special title treatment</h4>
            <p class="card-text">ad-in to additional content.</p>
            <h5 class="small-text">ad-in to additional content.</h5>
            <span class="card-img-overlay social-bar">
                <span class="social">
                    <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                    <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                    <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
                    <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                    <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                </span>
            </span>
       
        </div>
      
    </div>  
    
    
  
    <div class="left-div left-text">
      
        <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive" />
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
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
body
{
  background-color: #fcfcfc;
}
.bucket
{
  text-align: center;
  padding: 15px;  
  position: relative;
}
.left-div
{
  display: inline-block;
  width: 300px;
  height:330px;
  overflow:hidden;
  text-align: left;
  padding: 10px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 5px;
  vertical-align: top;
  z-index: 1;
}
.right-div
{
  display: inline-block;
  max-width: 150px;
  text-align: left;
  padding: 30px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 15px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"wo flex center"
Bootstrap 3.3.0 Snippet by jyapujuju

Related: See More

Questions / Comments:

"wo flex center" Bootstrap 3.3.0 Snippet by jyapujuju

Related: See More

Questions / Comments:

"wo flex center"
Bootstrap 3.3.0 Snippet by jyapujuju