bootstrap defining space between the divs without leaving the place

Question

I'm creating a card with html, css and bootstrap and I'm using the bootstrap class col to define the columns. My problem is when separating the divs, how is it possible to define 3 divs with col 4 and get a space between them without leaving the place? when I give a style of margin-left: 5px; for example, the third div goes to the bottom line

Your current `code`, as well as your Bootstrap version, is missing in your question. — WebDevBooster, Feb 16 '18 at 15:46
if you give 3 divs the col4 tag its the max of the width so you need to make them col3 and then it should work — tom, Feb 16 '18 at 15:47
I use version 3.3.7, my question is how to give a space horizontally between these divs — Bruno, Feb 16 '18 at 15:49

score 1 · Accepted Answer · answered Feb 16 '18 at 15:51

1

<div class="row">
    <div class="col-xs-4">
        <div class="card">...</div>
    </div>
    <div class="col-xs-4">
        <div class="card">...</div>
    </div>
    <div class="col-xs-4">
        <div class="card">...</div>
    </div>
</div>

And:

.card {
    margin: 0 5px;
}

answered Feb 16 '18 at 15:51

Roland Rácz

2,879
3
18
44

this causes the 3 div to go to the next line and not all align horizontally. – Bruno Feb 16 '18 at 15:52
@Bruno It's working for me: https://plnkr.co/edit/HHUaUaoWYw2A6N4Opktg?p=preview Any additional CSS that rewrites something? – Roland Rácz Feb 16 '18 at 15:58

bootstrap defining space between the divs without leaving the place

1 Answers1