I want to create a row at the very top of a page, and another row hovering the previous one. The idea is to create two columns in the first row - col-md-3 and col-md-9, and the second row is to apply an image between those two, so the row has col-md-2, col-md-2 (image between), col-md-8. It should look like this:
I managed to create it, but the box between is still not fixed:
<div class="container-fluid">
<div style="position: absolute; width: 100%;">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2" style="text-align: center; z-index: 9999;">
<div style="background-color: red;"> # Adding position: fixed here works but breaks box width
<img src="/assets/image/logo.jpg">
<br>
Something
</div>
</div>
<div class="col-md-8"></div>
</div>
</div>
<div class="row" style="height: 100%;">
<div class="col-md-3" style="position: relative;">
<div>
<img src="/assets/image/leftImage.jpg">
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-8">
Lorem ipsum...
</div>
</div>
</div>
How can I do that?
You dont have to use bootstrap, You can use css:
div.container
{
width:100%;
position:fixed;
background-color:red;
height:100px;
}
div.img
{
margin:auto;
width:80%;
padding:5px;
text-align:center;
}
If you check the fiddle you can understand it better.
Related
Preface: I cannot change the HTML.
To better explain my question, I have provided an illustration below. Essentially, I have two rows of divs - the first row has content, and the second row would have a button beneath the content.
I want to make the page responsive, so that the div with a button always is below its corresponding div with content, but the extra container divs are proving a challenge. Any ideas?
What I have (above) and what I want (below).
Here's the HTML code:
<div class="choice-section">
<div id="choice_1" class="choice odd" style="margin-top: 242px;">
<div class="content">asdf</div>
</div>
<div id="choice_2" class="choice even" style="margin-top: 322px;">
<div class="content">asdf</div>
</div>
</div>
<div>
<div class="vote-choice odd">
<a class="vote btn" href="javascript:void(null)" choice="1">Vote</a>
</div>
<div class="vote-choice even">
<a class="vote btn" href="javascript:void(null)" choice="2">Vote</a>
</div>
</div>
I would strongly reccomend looking at Bootstrap's grid and column system with which this can easily be achieved. This framework will make responsive design a breeze for you.
You can see an example of something pretty similar to what you are trying to achieve in a Plunker I very quickly put together
CSS:
.blue {
background-color:blue;
height:200px;
}
.red {
background-color:red;
height:200px;
}
.purple {
background-color:purple;
height:200px;
}
.green {
background-color:green;
height:200px;
} here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="red">
</div>
</div>
<div class="col-sm-3">
<div class="blue">
</div>
</div>
<div class="col-sm-3">
<div class="purple">
</div>
</div>
<div class="col-sm-3">
<div class="green">
</div>
</div>
</div>
I have found myself fumbling around with this odd layout that I need to design using Bootstrap.
Imagine the size of this is 660 x 330 wide, What I want to do is without any padding between anything is have an image on the left side that fills the black color 100%. The size of this will never change, on screens that it doesn't fit it will be using a different layout (so this will only really be on small+ screen sizes.
Here is what I originally was thinking, but since the image doesn't necessarily fit a column width, this will not work. Would it be best to create a container that is exactly 660x330 and then use rows/columns inside that? Or maybe I should step away from bootstrap in this case. Thanks in advance for any advice.
<div class="row">
<div class="col-xs-6">
<img src="../images/temp-featurelarge.jpg"/>
</div>
<div class="col-xs-6">
<div class="row">
</div>
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
</div>
</div>
</div>
Yes, you can create a div with specific Width and Height and then use columns to split. But here in your case I guess if you use "width: 50%" for the inner divs that would be fine and it's not necessary to use Bootstrap columns.
View my demo on jsfiddle
<div class="row">
<div class="col-xs-6">
<div class="left">
asdfdasf
</div>
</div>
<div class="col-xs-6 no_padding">
<div class="row">
<div class="col-xs-12 no_padding">
<div class="right_top">
asfjldfj
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 no_padding">
<div class="bottom_left">Dfdsaf</div>
</div>
<div class="col-xs-6 no_padding">
<div class="bottom_right">Dfdsaf</div>
</div>
</div>
</div>
Css=============>
body{
color:#FFF;
}
.left{
background:black;
height:300px;
}
.right_top{
background:red;
height:150px;
}
.bottom_left{
background:pink;
height:150px;
}
.no_padding{
padding:0;
}
.bottom_right{
background:blue;
height:150px;
}
I know this question has been asked before. However, I do not seem to find my mistake.
I set up a plnkr. I try to align some text vertically, whereas the the stuff that needs to be aligned is nested into multiple divs.
<div class="news col-md-12" id="detailsView" >
<div class="col-md-8 ">
<div class="row">
<div class="col-md-5 widthInDetails">
<div class="row">
<div class="col-md-8" id="newsDetails">
Hello I am fine and how are your (I am good too)
</div>
</div>
</div>
</div>
</div>
</div>
and in my CSS I have this.
.news{
background-color:black;
line-height:200px;
width:200px;
height:200px;
display:table;
}
#newsDetails{
display:table-cell;
vertical-align:middle;
}
So basically I have I lineheight given from the outer div with class="news". I want the the nested div to be aligned vertically. Is there any way to do this?
http://plnkr.co/edit/cMaCrG1Y8Ky48HwtgNPk?p=preview
If you want to use the display: table property, you should set it in the parent node, like:
<div class="news col-md-12" id="detailsView" >
<div class="col-md-8 ">
<div class="row">
<div class="col-md-5 widthInDetails">
<div id="newsParent" class="row">
<div class="col-md-8" id="newsDetails">
Hello I am fine and how are your (I am good too)
</div>
</div>
</div>
</div>
</div>
</div>
.news{
background-color:black;
width:200px;
height:200px;
}
#newsParent {
display:table;
}
#newsDetails{
height: 200px;
display:table-cell;
vertical-align:middle;
}
Give it a try and let me know if it helps!
You can make wrapper display: table and child div display: table-cell; vertical-align: middle;. find the below jsfiddle demo.
HTML
<div class="news col-md-12" id="detailsView" >
<div class="col-md-8 ">
<div class="row">
<div class="col-md-5 widthInDetails">
<div class="row newsDetailswrap">
<div class="col-md-8" id="newsDetails">
Hello I am fine and how are you?</div>
</div>
</div>
</div>
</div>
</div>
CSS
.newsDetailswrap{
background: red;
height: 100px;
display:table;
}
#newsDetails{
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/hhbnywq1/
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