I have a problem with using box-shadow. Below is the code:
<div class="container-fluid h-100" style="background-color : #F0F0F0;">
<div id="row1" class="row" style="box-shadow : 0 5px 10px 0 black; height: 100px;">
<div class="col-lg-3">
LOGO
</div>
<div class="col-lg-9" style="background-color: aqua">
HEADER
</div>
</div>
<div id="row2" class="row" style="height: 300px;">
<div id="sectiona" class="col-lg-3" style="background-color: aqua;">
Section A
</div>
<div id="sectionb" class="col-lg-9">
Section B
</div>
</div>
</div>
The box-shadow is not working for the id="sectiona" div? I tried using z-index but still not working. Any solution to this? I'm using bootstrap 4.
z-index property requires that the element's position is set.
<div id="row1" class="row" style="position: relative; z-index: 1; box-shadow : 0 5px 10px 0 black; height: 100px;">
Try applying the box-shadow style to the div with id="row2". That will give you a box-shadow in that section.
Related
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 new to bootstrap 3. I want to divide a row into 8-column and 4-column, also add the background for the row
<div class="row" >
<div class="col-sm-8">
<div class="abc" style="background:blue">a</div>
</div>
<div class="col-sm-4">
<div class="abc" style="background:blue; border:1px solid red">b</div>
</div>
</div>
but I dont know why there is a blank space between two column. So, how can I remove the blank. Below is a image for more detail.
ps: sorry for my bad english
View Live Bootply
CSS
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right:0;
padding-left:0;
}
.row.no-gutter {
margin-left: 0;
margin-right: 0;
}
HTML
<div class="row no-gutter">
<div class="col-lg-8"><div>one</div></div>
<div class="col-lg-4"><div>two</div></div>
</div>
Snap
use this
HTML
<div class="row" >
<div class="col-sm-8 paddin0 margin0">
<div class="abc" style="background:blue">a</div>
</div>
<div class="col-sm-4 paddin0 margin0">
<div class="abc" style="background:blue; border:1px solid red">b</div>
</div>
</div>
CSS
.paddin0 {
padding:0px !important
}
.margin0{
margin:0px; !important
}
I´m not bootstrap guru, what about adding blue background to parent .row instead of two children divs?
<div class="row" style="background:blue">
<div class="col-sm-8">
<div class="abc">a</div>
</div>
<div class="col-sm-4">
<div class="abc" border:1px solid red">b</div>
</div>
</div>
you can just use minus margin on that red lined div like margin-left:-30px , see demo here :
http://www.bootply.com/DDhnkOqeID
Cheers !
Just add this to your css file
.nopadding {
padding-left: 0px;
padding-right: 0px;
}
also, add that class to your column div's
having a new html code:
<div class="row" >
<div class="col-sm-8 nopadding">
<div class="abc" style="background:blue">a</div>
</div>
<div class="col-sm-4 nopadding">
<div class="abc" style="background:blue; border:1px solid red">b</div>
</div>
</div>
that will remove the padding.
Why I added a new css class?
Because you might need the default css structure of the boostrap, keeping them is a good idea and also the nopadding class can be used also to other div that you want to removed their padding.
Hope it helps.
Code here - http://jsfiddle.net/Cd2Ek/
html -
<div id="main-div" style="height: 250px; margin-left: 10px;">
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small>L1</small></div>
</div>
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small></small></div>
</div>
<div class="sub-div">
<div class="">33%</div> <div class="d1" val="1" style="height: 33%"></div>
<div class=""><small>L3</small></div>
</div>
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small></small></div>
</div>
<div class="sub-div">
<div>67%</div> <div class="d1" val="2" style="height: 67%"></div>
<div class=""><small>L5</small></div>
</div>
</div>
If you see the output in jsfiddle, the bars are going below the main-div. I think you can guess the actual requirement, all bars should be position from bottom, and if the % is 50, then frm bottom, bar should be upto 50% height of the main div, along with label, % indication.
I think this is what you need - fiddle. I've rearranged your code quite a lot to simplify how it works, but basically it uses absolute positioning to get the bars to stick to the bottom. Please let me know if anything is unclear.
Each bar now uses the HTML:
<div class="bar-container">
<div class="bar" style="height:50%">
<span class="percentage">50%</span>
<span class="label">L1</span>
</div>
</div>
Change your css with below one
.sub-div {
margin-right: 6%;
display: inline-block;
height: 250px;
border: 1px solid green;
**vertical-align:top;**
}
Try above code...
CSS
You missed aligning the bars add this line in you .sub-div css class
vertical-align: top;
DEMO
I have the following HTML:
<article id="articlesss" class="container_12 clearfix" style="margin-top: 2em; display: table;">
<div style="display: table-row">
<div class="grid_6" style="display: table-cell;">
<div class="block-border">
<div style="background-color: red; height: 100px;"></div>
</div>
</div>
<div class="grid_6" style="display: table-cell;">
<div class="block-border">
<div style="background-color: red; height: 200px;"></div>
</div>
</div>
</div>
</article>
I am using display: table-row because I heard that this would make my DIVs work like table cells and I was wanting the DIVs to be the same height. However it seems like the first grid_6 grid has a small height while the second has at least 100px. How can I make it fill to be the same height?
Here's an example: fiddle
<div class="block-border">
<div style="background-color: red; height: 100px;"></div>
You have set the height of second element i.e Height = 100px .
Set the height to both the div elements .
Both grid_6 elements are the same height. The reason why you see one red rectangle larger than the other is you are coloring the inside divs. If you put the color on the grid_6 elements - they are the same. http://jsfiddle.net/A7yXc/
<article id="articlesss" class="container_12 clearfix" style="margin-top: 2em; display: table;">
<div style="display: table-row">
<div class="grid_6" style="display: table-cell; background-color: red;">
<div class="block-border">
<div style="height: 100px;">das</div>
</div>
</div>
<div class="grid_6" style="display: table-cell; background-color: red;">
<div class="block-border">
<div style="height: 200px;">das</div>
</div>
</div>
</div>
i am trying to reduce the the width of slider using boot strap responsive css to display it in iphone
but i am not able to do it
can you please help me with it
http://jsfiddle.net/CXkQp/4/
screenshot
https://docs.google.com/file/d/0B3IBJKENGE7RQkk1eEI3TDNoN2c/edit
providing my code below
<div id="banner" class="clearfix" style="border-bottom: 2px solid #cacaca;">
<div class="bx-wrapper" style="width:100%; position:relative; margin-top: 0px; margin-bottom: 0px;">
<div class="bx-window" style="position:relative; overflow:hidden; width:100%">
<div class="container">
<div id="da-slider" class="da-slider" style="margin-top: 0px; margin-bottom: 0px; height: 300px; background-position: 247950% 0%;">
<div class="da-slide da-slide-toleft" style="width: 100%">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate1A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate1B.jpg" alt="image01"></div>
</div>
<div class="da-slide da-slide-toleft" style="width: 100%">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate2A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate2B.jpg" alt="image01"></div>
</div>
<div class="da-slide da-slide-fromright da-slide-current" style="width: 100%;">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate3A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate3B.jpg" alt="image01"></div>
</div>
<nav class="da-arrows" style="width: 100%">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
<nav class="da-dots"><span class=""></span><span class=""></span><span class="da-dots-current"></span></nav></div>
</div>
</div>
</div>
</div>
A couple of points to get you started. In your jsFiddle, there doesn't seem to be a closing tag for your container div # line 120.
Also you want your slider to scale but it's not inside a fluid row div. I think your bootstrap grid needs work. Check the structure for fluid grid carefully: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
Hope this helps.