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
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
<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..
While searching the solution I found a few approaches that could be a way. The closest to me was described here: Apply CSS to jQuery Dialog Buttons. But the reason...
I think I got it. Not beautiful but seems to work. p { overflow: hidden; } p span { margin: -1px 1px 1px -1px; line-height: 2em; border-top: 1px solid blue;...
Use CSS media queries for that: .resolution-warning { display: none; } @media screen and (max-width: 800px) { .resolution-warning { display: block; } } And put in HTML somewhere: <div class="resolution-warning">You...
You are getting 0 because of how you are using the numbers. You are using Integers. Do this: <%= target = (Float(10)/Float(20))/100 %> Using floats will allow you to get...
use <link rel="stylesheet" type="text/css" href="../css/web289.css" /> as css link as the name of your css is not style.css
background-position: center; background-repeat: no-repeat; works for me. centers horiz and vertically...
You can cheat by creating an element, applying the class, adding the element to the document, getting its color, then removing it. If this is all done in one code...
You may not need jQuery to do this. Given the markup you provided, just use plain CSS and utilize the adjacent sibling combinator, +: Example Here .description { display: none;...
If you know what the element widths are, you could always position it absolute (make sure to relative position the container). http://codepen.io/anon/pen/rWoLgx To only do it if the device width...
hmm maybe i'm not understanding this correctly but why don't you make the usercontrol finds the master's label (findcontrol); check the values; and then display the correct image. the way...
Theres now an official sample ;) http://code.msdn.microsoft.com/ie/Scrolling-panning-and-6834aaf9/sourcecode?fileId=68336&pathId=380363024
replace this css with what you have for #cssmenu > ul > li: #cssmenu > ul > li { display:inline-block; margin-left: 15px; /* This is when the drop down box...
A button is an inline element. Give it a display: block; or display: inline-block;...
You Can use the :focus on your rotate class which will make your image rotate on click, but be careful, clicking outside will lead to loosing the effect. Below The...
the answer is line-height in css check this fiddle http://jsfiddle.net/elviz/qvzk1eoj/1/ .sample{ height: 50px; background-color: red; line-height: 50px; } ...
If it is a border dotted use .container-body{ border:none; } Or it is outline use as per Mukesh Ram posted the answer .container-body{ outline:none; } ...
You could combine the use of <span> elements, which are inherently inline-block, with word-wrap:break-word. HTML: <div class="box"> <div class="price"> <span>HUF</span> <span>12944444</span> </div> </div> CSS: .box { background-color:#00FF7F; height: 300px; width:120px;...
you can do it with jquery like this : $("#idOfMyCSSElement div").css("color","#122362"); EDIT: you can mimic the hover pseudo class like following : $('.someclass').hover( function(){ $(this).css('background-color', '#F00'); }, function(){ $(this).css('background-color', '#000');...
Your problem is because you've not cleared the body's default margin, like so: body { margin: 0; } If you refer to the w3c specs for the body element you'll...
This will work but when the window width is below a certain point the text will go underneath the other text #gallery-text-left{ float:left; width:50% } I would consider using something...
Try like $('#myDiv').css('display','none'); There is an difference between hide and display:none. If you choose hide then the selected element will be hidden immediately, with no animation. This is roughly equivalent...
quite simple: .two { color: blue; } .one, .two:hover { color: red; } Hope this helps! If you ever did port over to SASS you could do it a little...
Either you need to add the index class to your document body, using something like this (or an equivalent after the page is loaded). extends layout block main - document.getElementByTagName("body").classList.add("index")...
You can do it like this: $('<div class="tile"></div>').css({left: leftPos, top: topPos}) .appendTo('#canvas'); This creates the element, styles it, then uses .appendTo() to put it in the same place. Alternatively, if...
they use the Responsive Web Design (Media Queries) : http://www.w3schools.com/css/css_rwd_mediaqueries.asp...
You can't do it using CSS it can only be done by inserting <link rel="icon" href="icon.gif" /> as you have described above.. CSS is used to format some text/images etc...
Go to Admin -> System -> Configuration -> Advanced -> Developer, click on CSS Settings and set Merge CSS Files to No. Clear your cache and you'll see the expected...
Use this css style it will work: .alert alert-warning{ width:98%;/*set the width by your needs*/ white-space: normal;} ...
If you want more control over the style of your submit button, use the button tag as so: HTML <form action="masterpage.cgi" method="post"> <input type="hidden" name="test" value="hoi"> <button type="submit" name="submit">opgave2</button> </form>...
The best way to do this is using "font icon technology" - you can read all about this in the web. Also it is helps when you need your markup...