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 link after the CSS-Animation?

    CSS Speech bubbles: How to update the tip position based on where the bubble is

    How to center align a glyphicon to the middle of the page at all screen sizes

    How to run PHP through Adobe Muse generated CSS

    How to add a class to only one div on click?

    JQuery: how to make this variable negative before declaring it as a CSS value?

    How does CSS computation for background percentages work?

    How to write this :not “in other element” CSS rule?

    How do I set the table row heights to minimum except last row?

    How do I set the height of an iframe with the min-height property in the body?

    How to Inherit grandparent CSS not parent?

    CSS How to fix element position after some scroll without using jquery

    How to add css style in php email?

    CSS image rollover map and jQuery : how to use a second li list?

    How to set border's thickness in percentages?

    How to use CSS with JS [duplicate]

    How to prevent fixed positioned element overlapping others elements in css?

    How to display row of images in a repeater control vertically instead of horizontally

    How to change inline css using jquery in joomla

    How to use CSS to position div popup when using :hover…?

    How can I create HTML/CSS responsive tile?

    HTML/CSS How to prevent highlighting text from spanning entire width of page in google chrome

    how to draw a shape by using canvas or css? [closed]

    How to design a comment box similar to facebook using only CSS?

    How to keep an element fixed top within another element?

    How to use jQueryUI tootip along with my custom css

    How to append a CSS rule to the another CSS rule

    How to create a box with line and add icon on side [closed]

    How can I make height: “100%” work cross browser in CSS?

    How to get a gradient background for table rows with JSF and CSS?