CODEWITHSUNDEEP
csstwitter-bootstrap
user63762453
user63762453

Reputation: 1734

How do I align these boxes using bootstrap?

Here is the code:

<div class="row" >
    <div id="box1" class="col-lg-4 box"style="">
        <img src="images/1.png" style="" class="num-img">
        <a href="#" style="text-decoration:none;color:#fff;">box 1 content</a>
    </div>  
    <div id="box2" class="col-lg-4 box" style="">
        <img src="images/2.png" style="" class="num-img">
        <a href="#" style="text-decoration:none;color:#fff;">box 2 content</a>
    </div>
    <div id="box3" class="col-lg-4 box" style="">
        <img src="images/3.png" style="" class="num-img">
        <a href="#" style="text-decoration:none;color:#fff;">box 3 content</a>  
    </div>
</div>

CSS of the box:

.box
{
    height: 130px;
    width: 200px;
    background-color: #000;
    color: #FFF;
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

This is how I want it to look like: enter image description here

This is how it looks right now :

enter image description here

And this is how it looks when I remove the box class and write:

<div id="box1" class="col-lg-4 "style="">

enter image description here

How do I fix this??

Update (after adding margin:0 auto):

enter image description here

Upvotes: 1

Views: 95

Answers (4)

li0n_za
li0n_za

Reputation: 455

You are possibly overriding the width of the col-lg-4 divs, depending on when your box css is loaded. Try

<div id="box1" class="col-lg-4">
    <div class="box">
        <img src="images/1.png" style="" class="num-img">
        <a href="Search.jsp" style="text-decoration:none;color:#fff;">box 1 content</a>
    </div>  
</div>

This will not force the col-lg-4 div to have a set px width, but instead a % with the inner div having a set width.

If you want to center the blocks within the bootstrap cols, add margin: 0 auto; to your box css.

.box
{
    height: 130px;
    width: 200px;
    background-color: #000;
    color: #FFF;
    padding: 20px;
    font-size: 30px;
    text-align: center;
    margin: 0 auto;
}

example using your fiddle

Upvotes: 3

Hardik Gondalia
Hardik Gondalia

Reputation: 3717

Please check this:

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.box
{
    height: 130px;
    width: 200px;
    background-color: #000;
    color: #FFF;
    padding: 20px;
    font-size: 30px;
    text-align: center;
}


</style>
</head>
<body>

<div class="row" >
      <div id="box1" class="col-lg-4 text-center">
          <div class="box" style = "display:inline-block">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
            <a href="#" style="text-decoration:none;color:#fff;">box 1 content</a>
          </div>
      </div>  
      <div id="box2" class="col-lg-4 text-center" style="">
          <div class="box"  style = "display:inline-block">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
              <a href="#" style="text-decoration:none;color:#fff;">box 2 content</a>
          </div>
      </div>
      <div id="box3" class="col-lg-4  text-center" style="">
          <div class="box" style = "display:inline-block">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
              <a href="#" style="text-decoration:none;color:#fff;">box 3 content</a>  
          </div>
      </div>
</div>

</body>
</html>

CodePen:http://codepen.io/anon/pen/ZbOKKw

Upvotes: 1

choz
choz

Reputation: 17888

Or you can wrap the box in a column like this..

<div class="row" >
      <div id="box1" class="col-lg-4"style="">
          <div class="box">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
            <a href="#" style="text-decoration:none;color:#fff;">box 1 content</a>
          </div>
      </div>  
      <div id="box2" class="col-lg-4" style="">
          <div class="box">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
              <a href="#" style="text-decoration:none;color:#fff;">box 2 content</a>
          </div>
      </div>
      <div id="box3" class="col-lg-4" style="">
          <div class="box">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
              <a href="#" style="text-decoration:none;color:#fff;">box 3 content</a>  
          </div>
      </div>
</div>

Upvotes: 1

Rush.2707
Rush.2707

Reputation: 683

Add col-offset-2 with all col classes and you will see change. change col-offset-2 as per requirement.

Upvotes: 1

Related Questions