This is difficult to explain so please see this fiddle: http://jsfiddle.net/vhfhzgfz/
Say I have a row of 4 columns using Bootstrap. I want the content within these cols to be equal distances apart. The content has a fixed width in px.
The content in the first column needs to be aligned to the left (edge of the page) and the content in the last col aligned to the right (the other edge of the page). This is fine.
But how do I align the content in the middle two columns to ensure the space between the content is equal.
Here's the code form the fiddle:
<div class="container">
<div class="row">
<div class="col-xs-3 left">
<div class="wrapper"></div>
</div>
<div class="col-xs-3 center">
<div class="wrapper"></div>
</div>
<div class="col-xs-3 center">
<div class="wrapper"></div>
</div>
<div class="col-xs-3 right">
<div class="wrapper"></div>
</div>
</div>
</div>
.col-xs-3{
background:lightblue;
outline:solid 1px black;
}
.wrapper{
width:100px;
height:100px;
background:pink;
position:relative;
display:inline-block;
}
.left{
text-align:left;
}
.right{
text-align:right;
}
.center{
text-align:center;
}
Related
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.
I am trying to make the <div> with class col-md-6 to be always positioned in the right end of the row even while scrolling horizontally.Here is an illustration.
<div class="row">
<div id="div1" class="col-md-6">.col-md-6</div>
<div id="div2" class="col-md-6">.col-md-6</div>
</div>
<div class="test">LARGER DIV
</div>
When we scroll horizontally i want div2 to remain in the last 6 columns of the window Which is not happening.The div itself is going out of the view.
Can you please specify or give some references to achieve this?I'm using Bootstrap-v3.3.0
You can set the second div to absolute position, and make it keeps the right always at the border of the screen using some jQuery.
CSS:
[class*="col-"] {
background: #F2FAFF;
border: 0px solid #B1D8ED;
display:inline-block;
}
.test{
width:2000px;
background: #F2F79F;
border: 0px solid #B1D8ED;
}
#fixed{
position:absolute;
}
HTML:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div id="fixed" class="col-md-6">.col-md-6</div>
</div>
<div class="test">
LARGER DIV
</div>
Javascript:
$(window).scroll(function(){
$('#fixed').css('right', $(this).scrollLeft() * -1);
});
Example:
http://www.bootply.com/yeKqMVA91r
Why not just wrap the larger div in a scrollable element like so:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-12" style="overflow:scroll;">
<div class="test">LARGER DIV</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/
This question already has answers here:
CSS: Vertical column layout without <table>
(3 answers)
Closed 9 years ago.
I have the below html code. What I need to do is split wuiInPageNav into two sections. LeftArea and wuiMainPageNav and they need to be side by side all the time. LeftAre div will hold my jstree nodes and wauiMainPageNave div will hold my charts and data etc. When I do the following, left goes left and wuiMainPageNav goes to the right. But when I resize the browser window, make it smaller, wuiMainPageNave goes down to the botttom. How do I make sure that LeftArea is always on the left and wuiMainPageName is always on the right, regardles of the browser window and size?missing here. Any ideas?
div id="wuiLeftArea">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title">Applicaion</h3>
<div id=tree></div>
</div>
</div>
<div id=wuiMainArea>
<div id=wuiMainContent>
<div id=wuiInpageNav>
<div id="top_chart" class="center"> </div>
</div>
</div>
</div>
css:
#wuiInpageNav {left:300px; float:right; width:1200px !important; overflow:hidden; }
div#wuiLeftArea{
float: left;
width: 16.25em;
background-color: #f2f4f5;
padding-top: .5833em;
position: relative;
}
UPDATE
Make sure you don't do your CSS inline:
http://jsfiddle.net/FE79R/1/
HTML
<div id=wuiMainArea>
<div id=wuiMainContent>
<div id=wuiInpageNav>
<div id="left">
<div id="tree">tree</div>
</div>
<div id=main>
<div id="top_charts" class="center"> </div>
<div class="main1">
<div id="top_chart1" class="center">top chart 1</div>
<div id="top_chart2" class="center">top chart 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#wuiInpageNav { width:300px; overflow:hidden; }
#left { width:100px; float:left; position:relative; background-color:#f2f4f5;}
#main { width:200px; float:left; background-color:orange;}