How can I have bootstrap bordered columns with margin?
I have:
<div class="col-sm-12 col-lg-6">
<div class="drag-block" id="addressField_1" ondragover="return dragOver(event)" draggable="true" ondragend="return dragEnd(event)" ondragstart="return dragStart(event)">
.....................
</div>
</div>
JSFiddle
But I want
<div class="col-sm-12 col-lg-6 drag-block" id="addressField_1" ondragover="return dragOver(event)" draggable="true" ondragend="return dragEnd(event)" ondragstart="return dragStart(event)">
.....................
</div>
JSFiddle
and to look like the first one.
Just change the css to the following :
.drag-block{
border: 2px dashed #bbb7b7;
margin: 0px 15px 30px 15px;
padding: 10px 15px 15px 15px;
cursor: move;
}
Related
I want to print the div with border, the border works fine in html page but in print preview the border not displaying.
even i have added inline css for <div class="sfborder"> this was not resulting the correct output, how can i solve this?
<style>
.sfborder {
border: 1px solid black !important;
border-collapse: collapse !important;
border-radius: 2px !important;
margin-bottom: 10px;
overflow: hidden;
}
#media print {
.sfborder {
border: 1px solid !important;
border-collapse: collapse !important;
border-radius: 2px !important;
margin-bottom: 10px;
overflow: hidden;
}
}
</style>
<div class="row">
<div class="col-sm-12">
<div class="sfborder">
<div class="col-sm-4">
<h6 class="text-info">Quote to</h6>
<h6>Kadamba India Technologies PVT LTD</h6>
<p>'Kasturba Nagar, Mysore Road, Bangalore - 560026</p>
</div>
<div class="col-sm-4">
<h6 class="text-info">Ship To</h6>
<h6>Kadama India Technologies PVT LTD</h6>
<p>'Kasturba Nagar, Mysore Road, Bangalore - 560026</p>
</div>
<div class="col-sm-4">
<div class="col-sm-12">
<h6 class="text-info">Delivery Terms</h6>
<p>Advance</p>
</div>
<div class="col-sm-12">
<h6 class="text-info">Payment Terms</h6>
<p>Against Delivery</p>
</div>
<div class="col-sm-12">
<h6 class="text-info">Other Reference</h6>
<p>Shipping charges extra</p>
</div>
</div>
</div>
</div>
</div>
Can i just ask why you are using #media print for your css, i would personally just have it in the same file, or just have the css file without the #media print {
}
<style>
.sfborder {
border: 1px solid !important;
border-collapse: collapse !important;
border-radius: 2px !important;
margin-bottom: 10px;
overflow: hidden;
}
</style>
have you tried just leaving it as above and removing the #media print?
and also did you import the css file correctly?
Hez guys, I have some elements on page, which I've wrapped with border. The elements are close to each other so of course, on the place, where they touch each other, I've got double border.
Think is, I've made links from these elements, so now, some additional border is applyed and I don't know how to remove it.
Code below usefully removed double border when element's we're not links.
Can you please help me to remove this border which comes from link ?
Thank you}
HTML
<section class="popular-items clearfix">
<a href="detail.html">
<div class="item">
<img src="img/pink.png" alt="pink"><br>
<span>2015</span>
<h4 class="pink">pink</h4>
<p class="out-of-stock">Abc</p>
</div>
</a>
<a href="detail.html">
<div class="item">
<img src="img/white.png" alt="white"><br>
<h4 class="green">white</h4>
<p>5 €</p>
</div>
</a>
<a href="detail.html">
<div class="item">
<img src="img/pink.png" alt="pink"><br>
<h4 class="pink">Pink</h4>
<p class="coming-soon">Pink</p>
</div>
</a>
<a href="detail.html">
<div class="item">
<img src="img/red.png" alt="red"><br>
<h4 class="red">Red</h4>
<p>5 €</p>
</div>
</a>
</section>
SCSS
.popular-items {
width: 100%;
.item {
float: left;
width: 25%;
border: 1px solid #dddddd;
padding: 1%;
border-right-width: 0;
height: 420px;
&:last-child {
border-right-width: 1px;
}
&:hover + & {
border-left-width: 0;
}
&:hover {
border: 1px $dark solid;
}
}
}
Well i think you can fix that by setting the border of the links to 0px.
border : none;
On desktop, my button looks great. When I go to mobile version, the button goes outside of the screen width like below:
1) How do I keep this from happened based on my bootply and code below
2) How do I add a top margin to the button too.
Here's my bootply:
http://www.bootply.com/KChuJgr967
Here's my html:
.content-section-d {
padding: 50px 0 0 0;
}
.centered-text {
text-align: center
}
/* Buttons */
.btn,
.btn:link,
.btn:visited {
font-family: 'Lato', sans-serif;
font-weight: 700;
padding: 15px 40px;
background-color: #db4632;
font-size: 20px;
letter-spacing: 0;
text-transform: uppercase;
border-color: #db4632;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.btn:active,
.btn:hover {
background-color: #db4632;
}
<div class="content-section-d">
<div class="container">
<div class="row centered-text">
<div class="col-md-4 col-xs-12">
<h3>4,000,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>1,500,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>150,000+</h3>
</div>
</div>
<div class="row centered-text">
<div class="col-md-4 col-xs-12">
<h3>68,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>2,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>3 years</h3>
</div>
</div>
<div class="col-lg-12 text-center">
Register for a Free Account
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-d -->
So, as I noted in comments you need to use #media.
Here, a code for your button, which your should add to stylesheets.
#media(max-width: 1200px) {
.btn span {
display: block;
max-width: 200px;
white-space: normal;
}
}
Also, don't forget about add <span> to your button. Now button code is:
<button href="https://www.apple.com" target="_blank" class="btn btn-primary btn-lg"><span>Register for a Free Account</span></button>
And here is full working example on JSFiddle.
P.S. Change max-width in #media to your property.
You can use vw and vh CSS rules to change the size of text according to the screen size. In your case if you add this:
font-size:3vw;
font-size:1.8vh;
It works pretty well. (Play with values to get exactly what you need)
Good evening, guys,
Could you please give me an advice,
I think I was at a deadlock!
There is the main navigation menu on the top of website.
Problem is that, I don't know how we can input shadow over the our navigation, directly in the bottom of navigation and it won't stop work of our left and right borders.
So, if I will put our shadow in another block (in my case "circle_shadow"), it won't cover up our borders, it will create new space after navigation.
I am interested, how can we put this kind of shadow on our menu, over the navigation borders?
Please, take a look:
<div class="container">
<div class="row">
<div class="common_block">
<div class="col-lg-2">Here we have a logo_1</div>
<div class="col-lg-8 border">Here is navigation</div>
<div class="col-lg-2">Here is logo_2</div>
<div class="circle_shadow"></div>
</div>
</div>
</div>
CSS:
.border {
border-right: 1px solid black;
border-left: 1px solid black;
}
.circle_shadow {
position: relative;
overflow: hidden;
padding:5px;
}
.box_center_shadow_m:before {
content: "";
height: 100px;
position: absolute;
right: 10px;
top: -99px;
left: 10px;
border-radius: 50%/60px;
box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
Here I attached some images:
It is a little hard to follow what you are asking, there might be an english barrier here. But if you are looking for a rounded drop shadow, here are some samples:
.roundedCorner {
width:350px;
height:200px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
border-radius:25px;
}
.circle {
width:150px;height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
More shadow options can be seen at a CoreLangs
Sorry for not clear question.
Yes, I know how to use rounded drop shadow.
Problem is not about how create rounded drop shadow.
Problem is how can we put this rounded drop shadow into the bottom of navigation block. This is the major question.
Take a look on this code:
I)
<div class="container">
<div class="row " style="background-color:#454545">
<div class="common_block">
<div class="col-md-2" style="background-color:#454545">
<a href="#" title="Omvana">
<img src="images/images.jpg" alt="Logo" />
</a>
</div>
<div class="col-md-8 border " style="background-color:#454545">
<ul class="h_menu">
<li class="active">
<a href="#" title="NEWS" >NEWS</a>
</li>
<li >
EVENTS
</li>
<li >
DOWNLOADS
</li>
<li >
TOUR
</li>
</ul>
</div>
<div class="col-md-2" style="background-color:#454545">
<div class="block_logo_2">
</div>
</div>
<div class="rounded_drop_shadow">
</div>
</div>
</div>
</div>
CSS:
.rounded_drop_shadow {
position: relative;
background: none repeat scroll 0% 0% transparent;
overflow:hidden;
padding:3px;
}
.rounded_drop_shadow:before {
content: "";
height: 100px;
position: absolute;
right: 10px;
top: -100px;
left: 10px;
border-radius: 50%/60px;
box-shadow: 0 0 60px rgba(0,0,0,0.3);
}
Now, this image shows, that shadow was added to the navigation block, but in extra space after.
http://i.imgur.com/rFuBnOB.png
But, my target is not extend block of navigation, just we have to put it above of navigation menu on the bottom. As if on top of it!
It should be like here:
http://i.imgur.com/ed3zWJL.png
Now, I found a solution, but I wonder if you take a look and will be able to give advice about this option:
Maybe, we should put block div with class="rounded_drop_shadow" inside another block div with class="shadow" (Both of them will still inside common_block) and play with position:absolute?
<div class="common_block">
<div class="col-md-2" style="background-color:#454545">
<a href="#" title="Omvana">
<img src="images/images.jpg" alt="Logo" />
</a>
</div>
<div class="col-md-8 border " style="background-color:#454545">
<ul class="h_menu">
<li class="active">
<a href="#" title="NEWS" >NEWS</a>
</li>
<li >
EVENTS
</li>
<li >
DOWNLOADS
</li>
<li >
TOUR
</li>
</ul>
</div>
<div class="col-md-2" style="background-color:#454545">
<div class="block_logo_2">
</div>
</div>
<div class="shadow">
<div class="rounded_drop_shadow"></div></div>
</div>
</div>
CSS
.box_center_shadow {
position: absolute;
top: 64px;
left: 0px;
right: 0px;
}
I wonder if somebody can tell me, if it is right way....or offer another options.
Thanks.
I have use the following code snippet to draw the border
<div style="height: 250px;width: 300px;border: 1px solid #99999A;">
<div style="padding: 0.7em 0.4em 0.2em 0.4em;height: 30px;border-bottom:1px solid #99999a;">
Title
</div>
</div>
I have create the Fiddle to explain my working scenorio from the following link
Click here
From this i got the out as like below screen shot:
Screen shot:
How to modify this by change the border bottom style of inner div to get output as like below screen shot
Screen shot:
Check this out. Working Fiddle
<div style="height: 250px;width: 300px;border: 1px solid #99999A;">
<div style="padding: 0.7em 0.4em 0.2em 0.4em;height: 30px;border-bottom:1px solid #99999a; width:90%; margin:0 auto;">Title</div>
</div>
Instead of padding, use margin for inner div. Fiddle http://jsfiddle.net/sajith/DZNbP/
<div style="height: 250px;width: 300px;border: 1px solid #99999A;">
<div style="margin: 0.7em 0.4em 0.2em 0.4em;height: 30px;border-bottom:1px solid #99999a;">
Title
</div>
</div>
*Used to this cod*e
HTML
<div class="main">
<div class="conmain">
<h1>Title</h1>
</div>
</div>
Css
.main{
height: 250px;width: 300px;border: 1px solid #99999A;
}
.conmain{
padding: 0.7em 0.4em 0.2em 0.4em;
}
.conmain h1{border-bottom:1px solid #99999a; line-height:30px;margin:0; font-size:12px;}
Demo