Css removing margin or padding in columns

Question

removing column padding or margins to create a tiling effect using bootstrap 3

  <div class="row">
  <div class="col-md-4">
    <div class="hexagon-wrapper hex_size">
        <div class="hexagon">
        </div>   
    </div>      
</div>
<div class="col-md-4">
    <div class="hexagon-wrapper hex_size">
        <div class="hexagon">
        </div>   
    </div>      
</div>  
<div class="col-md-4">
    <div class="hexagon-wrapper hex_size">
        <div class="hexagon">
        </div>   
    </div>      
</div>

  //row 2
  <div class="row">
  <div class="col-md-4">
    <div class="hexagon-wrapper hex_size">
        <div class="hexagon">
        </div>   
    </div>      
</div>
<div class="col-md-4 col-md-offset-2">
    <div class="hexagon-wrapper hex_size">
        <div class="hexagon">
        </div>   
    </div>      
</div>  
<div class="col-md-4">
    <div class="hexagon-wrapper hex_size">
        <div class="hexagon">
        </div>   
    </div>      
</div>

Result so far: enter image description here

I need a class to add to row to push the 2nd row up by 50%.Its seems to be over written by Bootstrap.

Post a fiddle or bootply, or at least include the relevant CSS for the non-bootstrap bits — Ted, Jun 04 '15 at 15:44
the custom css has no margins or paddings set if i try to they have no effect other than on the shape.. — Careen, Jun 04 '15 at 16:00
Where are you declaring the custom CSS? after or before the bootstrap? as Ted said link to a fiddle would help.... — MonteCristo, Jun 04 '15 at 16:39
Are you trying to push the bottom 2 hexagons between the 3 hexagons at the top? to make it look like a lattice? — MonteCristo, Jun 04 '15 at 16:40

score 0 · Answer 1 · answered Jun 04 '15 at 15:56

Bootstrap's rows and cols come loaded with paddings and margins. So, I would suggest that you clear those (inline) to check whether this is a bootstrap issue or a conflict brought by your custom CSS. I am almost sure that the latter will be the issue.

Could you provide this post with a bit more information? Maybe we could be more helpful.

score 0 · Accepted Answer · edited May 23 '17 at 12:14

0

You can use transform, like

.row.moveup{
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50px%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

See it in action here

(I made some minor edits to your html structure as well)

Also, you may want to have a look at this question

edited May 23 '17 at 12:14

Community

1
1

answered Jun 04 '15 at 16:25

Ted

14,757
2
41
58

Thanks, also the resources you provided were a better solution to what i was doing... – Careen Jun 05 '15 at 04:25

Css removing margin or padding in columns

2 Answers2