I am trying to create a small panel with an image and trying to figure out two things for it. I can't seem to get the border around the image to fit it. There is a small gap and I want the border to fit around the image. Also I want it so that when the user hovers over the image the border around the image turns yellow. For some reason those I can't seem to get these two things to work. Any help on this matter would be great
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<div class="pull-left col-xs-12 col-sm-6 col-md-6">
<a href="/recipes/arthritis-soother-36">
<img class="img-thumbnail img-responsive media-object" src=http://www.bodybysimone.com/wp-content/uploads/green-juice-mbd108052_vert.jpg >
</a>
</div>
</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
.panel-default{
width: 500px;
}
.panel-body hover{
background-color: yellow;
border size: 20px;
}
Fiddle
Update your css
.panel-default{
width: 500px;
}
.panel-body .img-thumbnail{padding:0px;border:1px solid transparent} /*remove padding and add transparent border*/
.panel-body:hover .img-thumbnail{
border-color: yellow; /*change the transparent border to yellow*/
border size: 20px;
}
DEMO
Related
On the Page: jerkydirect.com/base/opportunity - There are 3 boxes within the container with the picture. However, when viewed on a Large Screen - the last box sticks over the right side.
It looks great in a smaller window or mobile but not on a larger screen.
How do i get this to align correctly?
Here is the code:
<section class="plan-box opportunity">
<div class="container">
<div class="row">
<h2>Choose Your Crave:</h2>
<div class="col-xs-12 col-sm-12 col-md-12">
<center>
<div class="package">
<h3>Twin Pack</h3>
<p>2 BAGS</p>
<ul>
<li><span>Affiliate Price: </span><span>$19.75</span></li>
<li><span>Retail Price:</span><span>$21.75</span></li>
<li><span>Commission Payout:</span><span>$5.00</span></li>
</ul>
</div>
</center>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="package">
<h3>family Pack <span></span></h3>
<p>4 BAGS</p>
<ul>
<li><span>Affiliate Price: </span><span>$39.50</span></li>
<li><span>Retail Price:</span><span>$41.50</span></li>
<li><span>Commission Payout:</span><span>$10</span></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="package">
<h3>Party Pack <span></span></h3>
<p>10 BAGS</p>
<ul>
<li><span>Affiliate Price: </span><span>$79.75</span></li>
<li><span>Retail Price:</span><span>$87.75</span></li>
<li><span>Commission Payout:</span><span>$15</span></li>
</ul>
</div>
</div>
</div>
</div>
</section>
Your HTML code is fine.
Problem lies with your CSS
.package {
width: 350px;
height: 230px;
background-color: rgba(0,0,0,0.6);
border: 15px solid rgba(52,53,48,0.6);
margin: 50px 0 0;
padding: 25px 20px;
}
You shouldn't hard code the width with some pixel value rather remove the pixel value.
Hope this will help you.
Remove the <div class="container"></div> you already have one right after .inner-container.
And Content should be placed within columns, and only columns may be immediate children of rows.
Remove width: 350px from .package div from css.
#service-one .package {
width: auto !important;
}
Or add this style on css files
I'm new to bootstrap, and I set border to Jumbotron class and I see the border top, left and right, but can't see the border bottom, it's missing.
I found in bootstrap site this: that I think I have that, but I have know idea how to reset this...
I want to see the border bottom, not to hide it.
I have a bootstrap.min.css file (in additon to my css file of course), but there's nothing in the bootstrap file that related to the borders or Jumbotron..
How can I reset the border bottom 0?
Thank you!
You bottom border might be under the bellow element. Check this example,
.jumbotron{
position: relative;
padding:0 !important;
margin-top:70px !important;
background: #eee;
margin-top: 23px;
text-align:center;
margin-bottom: 0 !important;
border:2px solid blue;
//border-bottom:2px solid red;
}
.jumbotron .container-fluid{
padding:0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron" id="jumbo_block">
<h1>Lorem Ipsum Dolor</h1>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-4">
<h3><span class="glyphicon glyphicon-time"></span></h3>
<h4> Thursday 12:30</h4>
</div>
<div class="col-xs-4">
<h3><span class="glyphicon glyphicon-map-marker icon-white"></span></h3>
<h4> Kanyon</h4>
</div>
<div class="col-xs-4">
<h3><span class="glyphicon glyphicon-user"></span></h3>
<h4>6 People</h4>
</div>
</div>
</div>
</div>
So here's my problem: I have a big container div, and a div inside that container. the container has a box-shadow on it that is black. When I set the inner div's background color to black, you can't see the box-shadow. I thought maybe this was an illusion caused by the eye, but taking a closer look you can see the pixel differentiation.
Example image.
Here is a more clear depiction of the problem:
Yet another example image
Raw code incoming!
HTML: (The div#footerContainer part is pretty much the important part)
<div id="bodyContainer">
<div id="menuContainer">
<div id="menuElements" class="center">
<div class="menuElement underlineHover" color="#FF0E0E">Home</div>
<div class="menuElement underlineHover" color="#13DB13">Services</div>
<div class="menuElement underlineHover" color="#1792BB">Photo Gallery</div>
<div class="menuElement underlineHover" color="#E4146B">Why Use Fox Foliage?</div>
<div class="menuElement underlineHover" color="#FF9616">Contact</div>
</div>
</div>
<div id="barSpacer" style="margin: 0 auto 20px"></div>
<div id="imageContainer">
<img src="images/image1.jpg"/>
<div id="title">
<div class="center">
<p class="spaced">Fox Foliage</p>|<p class="spaced">352-949-2481</p></p>
</div>
</div>
</div>
<div id="barSpacer"></div>
<div id="contentContainer">
<?php include("content.php") ?>
</div>
<div id="barSpacer"></div>
<div id="footerContainer">
</div>
CSS (Container DIV):
div#bodyContainer{
max-width: 1000px;
background-color: white;
margin: 0 auto;
box-shadow: 0 0 30px 2px black;
}
CSS (Footer DIV):
div#footerContainer {
height: 40px;
width: 100%;
background-color: black;
color: white;
}
The whole goal is to make sure the box-shadow is the same consistency all the way around.
I'm having problems styling my page and I'm not sure what to do.
The issue I'm running into is that the container class in Bootstrap has a sizable amount of padding on each side, but I can't seem to reliably remove it. I want the red background to be flush against the grey image, and have blue in the background. The only way I've been able to work around this is by using the CSS property background-clip: content-box but then I begin to run into issues when I start adding things like box-shadows.
This is what I have right now:
This is what I want to have:
Here is my code:
<div class="container content-color">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://placehold.it/1140x360">
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="circle center-block"></div>
</div>
<div class="col-md-4">
<div class="circle center-block"></div>
</div>
<div class="col-md-4">
<div class="circle center-block"></div>
</div>
</div>
</div>
.circle {
background-color: #48c1b0;
height: 150px;
width: 150px;
border-radius: 50%;
}
body {
background-color: blue;
}
.content-color {
background-color: red;
}
}
JS Fiddle: http://jsfiddle.net/rxvk0w2n/
col-* has a default padding of 15px on both, right side and left side.
So, if you want to remove the padding, simply use this in your css:
.removePaddingRightLeft {
padding-right: 0;
padding-left: 0;
}
And your html:
<div class="col-md-12 removePaddingRightLeft">
<img class="img-responsive" src="http://placehold.it/1140x360"/>
</div>
Updated fiddle
Hello guys I am using boostrap for my website and I want a border to take the whole width of a specific div. This is what I have so far:
and I want to make it on the whole div. I tried display:block width:100%, it just doesn't want to work.
Anyone for a solution ?
CSS
.borders {
border-top: 1px solid #dedbdb;
}
HTML
<div class="row">
<div class="col md-4 borders">
<p><span class="glyphicon glyphicon-user"></span>{numberAttending} {numberMaybe} {numberNotAttending}</p>
</div>
</div>
The reason that your border is not taking up the entire width is because your row has padding on it.
<div class="row no-padding">
<div class="col md-4 my-styles">
<p><Content here.</p>
</div>
</div>
.no-padding {
padding: 0;
}
.my-styles {
border-top: 1px solid #dedbdb;
padding: 15px;
}