How do I add a margin between bootstrap columns without wrapping


Tags: html,css,twitter-bootstrap,twitter-bootstrap-3

Problem :

My layout currently looks like this

Current Layout

In the center column, I want to add a small margin between each Server Div. But, if I add a margin to the CSS, it ends up line wrapping and looking like this

Attempted Change

<div class="row info-panel">
    <div class="col-md-4 server-action-menu" id="server_1">
        <div>
            Server 1
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_2">
        <div>
            Server 2
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_3">
        <div>
            Server 3
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_4">
        <div>
            Server 4
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_5">
        <div>
            Server 5
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_6">
        <div>
            Server 6
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_7">
        <div>
            Server 7
        </div>
    </div>
</div>

And the CSS

.server-action-menu {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
    background-repeat: repeat;
    border-radius:10px;
}

.info-panel {
    padding: 4px;
}

I attempted to add the margins by doing this

.info-panel  > div {
    margin: 4px;    
}

How can I add a margin to the DIVs so that they don't leave so much space on the right hand side?



Solution :

You should work with padding on the inner container rather than with margin. Try this!

HTML

<div class="row info-panel">
    <div class="col-md-4" id="server_1">
       <div class="server-action-menu">
           Server 1
       </div>
   </div>
</div>

CSS

.server-action-menu {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
    background-repeat: repeat;
    border-radius:10px;
    padding: 5px;
}

    CSS Howto..

    How to change buttons to pictures in jquery dialog

    How to add vertical and horizontal separators between inline elements in CSS?

    Show warnings screen resolution

    how to add embedded ruby in style tag

    How do I make my CSS link up to files in different directories

    How do I center a background image to its parent element?

    How to get a style property from a css class and set it to another css class?

    How to make a div that appear on hover, stay while its hovered on in jquery or css

    How to make 4 divs float left and one float right with this order?

    How to change Image inside of CSS of a usercontrol

    css scroll/touch slide view - how to use -ms-scroll-snap or the like?

    How To Center A CSS Drop Down Menu [closed]

    How can I prevent my button from being mangled?

    How to do onclick in CSS to do transition on image?

    CSS : how to center a input inside a div

    How to remove outline dotted border with using css

    How can I move text to a new line if it breaks the width of a box?

    How do I control a css child property with javascript?

    How to make a div 100% accross

    How to place two paragraphs side by side (next to each other)?

    Divs showing and then hiding on page load

    CSS Selectors - How to apply a defined class on the selector's event

    How to add background image to only one page in Jade

    How to append() an element and set its style with css() at the same time with jQuery

    CSS: How does youtube change its appearance based on screen size?

    How to set icon of an page using CSS

    How to disable auto genrated css in media folder at runtime Magento?

    How to wrap text in css

    How to style form submit button in CSS?

    How to reuse a css background sprite for icons of different sizes?