I have a 2 row layout, with 1 column in the first row, and three columns in the second row. The text is aligned left in the one column, and the three columns in the second row are all center aligned like so:
What I want to do is to somehow align the text in the one column with the left edge of the first item in the 3 column layout, but I'm not sure if this is possible? (at least not without using js). Is there a simple way to do this using the bootstrap classes?
You can put the top text inside the same container as 'Centered 1', and then move it up using position:absolute. See fiddle: https://jsfiddle.net/avgh4x67/.
HTML:
<div id='above'></div>
<div class='container'>
<div class='row'>
<div class='col-sm-4'>
<div>
Centered 1
<div id='centered-1-aligned'>aligned</div>
</div>
</div>
<div class='col-sm-4'>
<div>Centered 2</div>
</div>
<div class='col-sm-4'>
<div>Centered 3</div>
</div>
</div>
</div>
CSS:
#above {height: 80px; border: solid 3px red; margin-bottom: 10px;}
.col-sm-4 {text-align:center; border: solid 3px red; }
.col-sm-4 > div {display:inline-block;}
#centered-1-aligned {text-align: left; position: absolute; top: -80px;}
Related
I have a problem I don't manage to solve by myslef, even though it looks simple.
On a web page, I have a flex container div, which contains 2 other div.
The first div is nothing else than a space reserved to trigger some action when the mouse is over(typically, open a menu).
The second div is dynamically populated with elements according to some parameters and user actions. (For example, the user clicks on a button which trigger the creation of a new textarea field).
So, the second div may become higher and higher.
Is there a way to have the first div automatically following the height of the second div, even if the second div overflows ?
Here is a basic example of what I did :
HTML
<div id='wrapper'>
<div id="div1">
-
</div>
<div id="div2">
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
</div>
<div>
</div>
</div>
CSS
#wrapper {
display: flex;
align-items: flex-start;
flex-flow: row;
justify-content: flex-start;
}
#div1 {
background-color: mediumblue;
width: 20px;
color: mediumblue;
}
.yellowDiv {
background-color: yellow;
border: solid 2px;
height: 100px;
}
In this example, the yellow div simulates the one which is dynamically populated, and the blue div simulates the one I want to use to trigger the opening of my menu.
Is there a way to achieve this with flexbox ?
Thank you in advance for your help.
Regards,
Not with flex, but you should try doing it with grid.
#wrapper {
display: grid;
grid-template-columns: 20px 100px;
height: min-content;
}
#div1 {
background-color: mediumblue;
width: 20px;
color: mediumblue;
}
.yellowDiv {
background-color: yellow;
border: solid 2px;
height: 100px;
}
<div id='wrapper'>
<div id="div1">
-
</div>
<div id="div2">
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
</div>
<div>
</div>
</div>
You can check the above code snippet.
The theory around the concept: If you don't specify a specific value of grid-template-rows, then it will make all the columns of maximum size.
Do let me know if you got a problem with it :)
I'm struggling with Bootstrap rows and columns in a SharePoint web site. The problem is that I can't and don't want to change the styling that originates from SharePoint, but still be able to use the Bootstrap grid in a part of the page.
I've tried to illustrate the problem without Bootstrap and SharePoint. Here's the JSFiddle:
https://jsfiddle.net/knLjyhe4/
Below is a complete illustration of my example. The problem is that once I use a row to separate element B from C, D and E, the height of side element A affects the first row's height, which I don't want. I want element C to appear immediately below element B. The second example is how it looks before I add the div.row elements.
Below is the HTML and CSS for the isolated example. I had hoped that I could style the div.main element somehow so that the float of A doesn't affect the float of B-E at all. But I can't figure it out.
Please note that I'm sure there are several solutions if I start to change the HTML and styles (like using position), but I really just want to know if there is a way in CSS where the div.main element gets "its own" floating area, without being affected by the A element's float.
<style>
section {
width: 600px;
margin: auto;
}
.block {
float: left;
margin: 10px;
background-color: #339;
color: #fff;
width: 140px;
padding: 10px;
}
.side {
width: 200px;
height: 100px;
}
.main {
margin-left: 240px;
}
.row:after {
display: table;
content: ' ';
clear: both;
}
</style>
<section>
<div class="side block">This is element A in problematic example. I want element C immediately below element B, regardless of the height of this element</div>
<div class="main">
<div class="row">
<div class="block">This is element B</div>
</div>
<div class="row">
<div class="block">This is element C</div>
<div class="block">This is element D</div>
<div class="block">This is element E</div>
</div>
</div>
</section>
<section>
<div class="side block">This is element A when it works but without rows</div>
<div class="main">
<div class="block">This is element B</div>
<div class="block">This is element C</div>
<div class="block">This is element D</div>
<div class="block">This is element E</div>
<div class="block">This is element F</div>
<div class="block">This is element G</div>
<div class="block">This is element H</div>
<div class="block">This is element I</div>
</div>
</section>
Seems to be working if you change your CSS for .main to this (display: table-row;):
.main {
margin-left: 240px;
display: table-row;
}
Updated JSFiddle here
UPDATE 1
Changed table to table-row since it did not work in IE10.
UPDATE 2
For future reference, the final solution used in SharePoint / O365 looked something like this:
HTML (.container is a bootstrap container)
<div id="DeltaPlaceHolderMain">
<div class="container">
<div class="inner-container">
<!--Your content here-->
</div>
</div>
</div>
CSS
.container .inner-container {
display: inline-block;
width: 100%;
}
The .main needs to be float:left and it needs to have less px to width.
Try defines
.side {width:30%; float:left;}
.main{width:70%; float:left; margin-left:0; }
Don't forget to clean the margin-left of .main
The clear: both property on the row:after pseudoclass is causing your second row to jump down below the left-floated side element.
In bootstrap you should use classname col-md-4 on your side element, classname col-md-8 on your main element, and remove the float: left property from your side element. This will give you 2 columns, one for side which is 4 grids wide and one for main which is 8 grids wide. Your rows should function as you expect once the float is gone.
<style>
section {
width: 600px;
margin: auto;
}
.block {
background-color: #339;
color: #fff;
padding: 10px;
}
</style>
<section class="row">
<div class="block col-md-4">This is element A</div>
<div class="col-md-8">
<div class="row">
<div class="block col-md-6">This is element B</div>
</div>
<div class="row">
<div class="block col-md-6">This is element C</div>
<div class="block col-md-6">This is element D</div>
<div class="block col-md-6">This is element E</div>
</div>
</div>
</section>
In general, with bootstrap you don't want to float things. Also, instead of setting element widths explicitly, it is better to use the .col- classes to fit them into the bootstrap grid system.
I'd like to create single row with two overlapping columns like that:
.row
.col-sm-7
.col-sm-6
so that 6th column of the grid is overlapped.
It's partially possible with a .col-sm-pull-1:
.row
.col-sm-6
.col-sm-6.col-sm-pull-1
but the 12th column becomes empty. I tried:
.row
.col-sm-6
.col-sm-7.col-sm-pull-1
but the second column moves to the next row.
I found the answer for Bootstrap 2 (How to overlap columns using twitter bootstrap?). Is it possible with the Bootstrap 3?
After seeing your image example, I think perhaps this is what you are looking for. (I made them overlap 2 columns because that will center it better)
.blue{
background-color: rgba(0,0,255,0.5);;
}
.row .red{
background-color: rgba(255,0,0,0.5);
position: absolute;
}
.red, .blue {
height: 70px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="red col-xs-7"></div>
<div class="blue col-xs-7 col-xs-push-5"></div>
</div>
</div>
Fiddle If you want to overlap the two columns in one row, you'll need negative margins. The bootstrap gutters/margins are layed out using positive and negative margins. I would recommend ids for the columns and then you can use z-index if you want one over the other one.
So change right margin on first and left margin on the second.
margin-right: -5%;
margin-left: -5%;
How the grid works is a great reference for how its built.
You need to place the new column under the same div as the one you want to overlap.
Here is an example
<style>
.first {
background-color: #dedef8;
border: solid black 1px;
}
.second {
background-color: #dedef8;
border: solid black 1px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-xs-7 first">
<p>This is the first column</p>
<div class="col-xs-6 second">
<p>This is the second </p>
</div>
</div>
</div>
</div>
</body>
Here's a jfiddle example: http://jsfiddle.net/NachoSupreme/o0fs78fv/
Issue is that i am trying to vertically align text within neighboring divs in a bootstrap 3 row where one cell has text of varying size. the text in neighboring cells aligns along the top, but i need it to align along the bottom.
Fiddle of the problem: http://www.bootply.com/GqKdUa9uxT
Yes, i have searched and have surprisingly not found an adequate answer:
vertical-align with Bootstrap 3
does not help for example as i am trying to align the text, not the div.
thanks, airyt
You can align text to the bottom in the right div by using "position:relative" for parent div and "position:absolute" for a child, then you can adjust the position by changing the value of a bottom property according to your need.
The HTML code:
<div class="container">
<div class="row">
<div class="col-sm-6">
Here is some text (Text A) <span style="font-size: 40px">Text B</span>
</div>
<div class="col-sm-6 bottom-align">
This text needs to be (bottom) ed with Text A in previous cell.
</div>
</div>
</div>
and the CSS styling:
.row {
position: relative;
}
.bottom-align {
position: absolute;
bottom: 0px;
right: 0;
border-bottom: 1px solid red;
}
.border{
border-bottom: 1px solid blue;
}
Please check the fiddle:
http://jsfiddle.net/johannesMt/craLuLpb/
You can't vertically align floated wrappers, you need to change it to inline element.
DEMO
.col-sm-6 {
display: inline-block;
vertical-align: bottom;
float: none;
width: 50%;
}
<div class="container">
<div class="row">
<div class="col-sm-6">
Here is some text (Text A) <span style="font-size: 40px">Text B</span>
</div><div class="col-sm-6">
This text needs to be (bottom) aligned with Text A in previous cell.
</div>
</div>
</div>
Don't use .col-sm-6 since this will overwrite bootstrap grid system, give it another name
Ok so if you do:
<div class="row-fluid">
<div class="span6"></div><!--span6 END-->
<div class="span6"></div><!--span6 END-->
</div><!--row END-->
picture that as 2 red boxes both taking 50% of the screen.. but every time I do this the span6 has a margin our in between each other and the row above it... How do I make it so that there is no margin above or in between the spans .. I want them to touch above and to the sides.
As you probably don't want to override all .span6 elements, I'd suggest the following:
<div class="row-fluid">
<div class="span6" style="margin: 0px; background-color: red; width: 50%;">foo</div><!--span6 END-->
<div class="span6" style="margin: 0px; background-color: blue; width: 50%;">bar</div><!--span6 END-->
</div><!--row END-->
JSFiddle
EDIT:
As .row-fluid uses width: 100% and .row-fluid .span6 uses width: 48.93617021276595%;, you also need to change width of those divs. See updated code and fiddle.
I would recommend not using grid spans if you don't need grid spans rather than overriding. If you're overriding practically every property of a class, you're better off just using a new class.
.half {
margin: 0;
background-color: red;
width: 50%;
float:left;
}
<div class="row-fluid">
<div class="span12">
<div class="half">First</div>
<div class="half">Second</div>
</div>
</div>
http://jsfiddle.net/cGCHa/4/