CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
coder
coder

Reputation: 11

how to show 2 divs in the center of the row in bootstrap

i want to show 2 div in the center. i have divs which shows like this. i just want second row div in the center. req design like this

output
----     -------       -------
         -------       -------

desired output
-----     -------       -------
    -------       -------

code

<div class="row">
   <div class="features">
      <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
         <div class="feature-wrap">
            <a href="one.aspx">   <i class="fa fa-pencil" ></i></a>  
            <h2>One</h2>
            <h3>one</h3>
         </div>
      </div><!--/.col-md-4-->  
      <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
         <div class="feature-wrap">
            <a href="two.aspx">    <i class="fa fa-line-chart"></i></a>
            <h2>Two</h2>
            <h3>Two</h3>
         </div>
      </div><!--/.col-md-4-->        
      <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
         <div class="feature-wrap">
            <a href="Three.aspx"> <i class="fa fa-database"></i></a> 
            <h2>three</h2>
            <h2>Three</h2>
            <h3>Three</h3>
         </div>
      </div><!--/.col-md-4-->
      <div>
         <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms" align="">
            <div class="feature-wrap"> 
               <a href="Four.aspx">  <i class="fa fa-book" align=""></i></a>
               <h2>Four</h2>
               <h3>Coming Soon...</h3>
            </div>
         </div><!--/.col-md-4-->
         <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
            <div class="feature-wrap">
               <a href="Five.aspx"> <i class="fa fa-mobile"></i></a>
               <h2>Five</h2>
               <h3>Coming Soon...</h3>
            </div>
         </div><!--/.col-md-4-->
      </div>
  </div><!--/.services-->
</div>
</div><!--/.services-->
</div>

jsfiddle code https://jsfiddle.net/tccu9ue8/4/

Upvotes: 1

Views: 1656

Answers (4)

Sunny
Sunny

Reputation: 564

This is one way of achieving what you asked for:
[basic CSS (padding and margin) can be applied for better results]

<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

</head>
<body class="container">
<div class="row">
    <div class="col-md-4 col-xs-4 col-lg-4 col-sm-4" align="center">
    <button class="btn btn-primary">1ST</button>
    </div>
      <div class="col-md-4 col-xs-4 col-lg-4 col-sm-4" align="center">
    <button class="btn btn-primary">2nd</button>
    </div>
      <div class="col-md-4 col-xs-4 col-lg-4 col-sm-4" align="center">
    <button class="btn btn-primary">3rd</button>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-6 col-xs-6 col-lg-6 col-sm-6" align="center">
    <button class="btn btn-primary">4th</button>
    </div>
      <div class="col-md-6 col-xs-6 col-lg-6 col-sm-6" align="center">
    <button class="btn btn-primary">5th</button>
    </div>
</div>
</body>
</html>

Hope this helps serve your purpose.

Upvotes: 1

Eyal Cohen
Eyal Cohen

Reputation: 1288

The simple way you can achieve this design by using flexbox.

You can find a good guide from MDN here.

For your implementation, You dont have to use bootstrap.

Just wrap two lines, create one line full width, another with half width, and use flexbox properties to align them as you wish.

.line {
  display: flex;
  justify-content: space-between;
}

.line--second {
  width: 50%;
  margin: 0 auto;
  justify-content: space-between;
}
<div class="wrapper">

<div class="line line--first">
 <div class="item">One </div>
  <div class="item"> Two </div>
  <div class="item"> Three </div>
</div>
<div class="line line--second">
  <div class="item">Four </div>
    <div class="item">Five </div>
</div>

</div>

Hope this what you meant.

Upvotes: 1

Ram kumar
Ram kumar

Reputation: 3162

you need to use display:inline-block instead of float: left for bootstrap column https://jsfiddle.net/7mbs9cjj/

.block {
  height: 200px;
  background: #333;
}

.h-center .col-sm-4 {
  margin-bottom: 20px;
  float: none;
  display: inline-block;
  vertical-align: top;
  margin-right: -4px;
}

.row {
  text-align: center;
  display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row h-center">
  <div class="col-sm-4">
    <div class="block"></div>
  </div>
  <div class="col-sm-4">
    <div class="block"></div>
  </div>
  <div class="col-sm-4">
    <div class="block"></div>
  </div>
  <div class="col-sm-4">
    <div class="block"></div>
  </div>
  <div class="col-sm-4">
    <div class="block"></div>
  </div>
</div>

Upvotes: 0

Ankur Agarwal
Ankur Agarwal

Reputation: 286

As suggested by @sahil Dhir you could use offset values for your layout like 

Col-md-offset-[number of column offsets]

In your case giving column offset of 2 to the first element of second row should do the magic.

Here is a working fiddle. https://jsfiddle.net/tccu9ue8/6/

Let me know if you need more info Cheers!!!

Upvotes: 3

Related Questions