I have a two column layout with nested columns on the left column. How would i vertically align the text in the right column to the middle in bootstrap?
I have tried setting top:50% but nothing happens. And i have also tried using the vertical-align:middle.
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"> <!-- Left Column-->
<div class="row">
<div class="col-lg-6" style="height: 350px; background-color: red;">1</div>
<div class="col-lg-6" style="height: 350px">2</div>
<div class="col-lg-6" style="height: 350px">3</div>
<div class="col-lg-6" style="height: 350px; background-color: red">4</div>
</div>
</div>
<div class="col-lg-6"> <!-- Right Column-->
<div class="box-section">
<h2 class="custom-font font-xx">THIS TEXT<br>
Metals & O-rings</h2>
<h4 class="custom-font font-sub">THIS TEXT</h4>
</div>
</div>
</div>
</div>
Cheers!
Not sure if it's exactly what you are after.
but you could set the height and then vertical align.
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"> <!-- Left Column-->
<div class="row">
<div class="col-lg-6" style="height: 350px; background-color: red;">1</div>
<div class="col-lg-6" style="height: 350px">2</div>
<div class="col-lg-6" style="height: 350px">3</div>
<div class="col-lg-6" style="height: 350px; background-color: red">4</div>
</div>
</div>
<div class="col-lg-6" style="height:700px"> <!-- Right Column-->
<div class="box-section">
<h2 class="custom-font font-xx">THIS TEXT<br>
Metals & O-rings</h2>
<h4 class="custom-font font-sub">THIS TEXT</h4>
</div>
</div>
</div>
</div>
Then add this css
/* CSS used here will be applied after bootstrap.css */
.box-section
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Problem is it won't be responsive with the set height values, however you could set that up seperately in the css
http://www.bootply.com/FOsl3LiKn1
I think that AceWebDesign answer is correct but you can achieve the same effect without setting the right column height and with the box section class as this:
.box-section{
margin-top:50%;
transform: translateY(-50%);
}
forked snippet: http://www.bootply.com/84dXtE0F2B
Related
My goal is to achieve the following image on my page:
I managed to achieve this with the HTML and CSS you can find below, but it doesn't seem very viable, because the sidebar is losing it's physical height because of the position: absolute.
I'm wondering if it's possible to make one row with two columns on the left and a sidebar on the right, without having to use positioning.
I tried position: relative with a negative top, but since the top col-md-9 has a changing height (depending on what is entered), I can't give it a negative top. It'll simply be too static and impossible to maintain.
Changing the order in the HTML doesn't change anything, since the physical height of the sidebar will move the 2nd content down.
.sidebar {
position: absolute;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-9">
Changing content
</div>
<div class="col-md-3 sidebar">
Sidebar
</div>
<div class="col-md-9">
More content
</div>
</div>
I use xs columns for this example, but you can change to md in your page.
Firstly create a 9-column and a 3-column div. Then put two divs inside the 9-column one.
.content, .sidebar {
margin: 10px;
padding: 20px;
}
.content {
background-color: navy;
color: white;
}
.sidebar {
background-color: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row wrapper">
<div class="col-xs-9">
<div class="row">
<div class="col-xs-12">
<div class="content">Content</div>
</div>
<div class="col-xs-12">
<div class="content">Content</div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="sidebar">Sidebar</div>
</div>
</div>
You can nest col-x-x inside other col-x-x
You just have to create 2 parents: content and sidebar, then add multiple contents into the content parent :
<div class="row">
<div class="col-md-9">
<div class="col-md-12">
Content
</div>
<div class="col-md-12">
More content
</div>
</div>
<div class="col-md-3 sidebar">
Sidebar
</div>
</div>
You cannot have more that 12 columns in a row unless it is not defined in your custom grid.
What you can try is this:
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-sm-12">
Changing content
</div>
<div class="col-sm-12">
More content
</div>
</div>
</div>
<div class="col-md-3" style="position: relative;">
<div class="row">
<div class="col-sm-12 sidebar">
Sidebar
</div>
</div>
</div>
</div
As a solution, you can make sidebar to stay at the right side of screen if you'll make left section overflow: auto.
.sidebar {
height: 100vh;
background: lightgreen;
}
.left-section {
height: 100vh;
background: lightblue;
overflow: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-9 left-section">
<div class="row">
<div class="col-sm-12">
Changing content
</div>
<div class="col-sm-12">
More content
</div>
</div>
</div>
<div class="col-sm-3 sidebar">
Sidebar
</div>
</div>
</div>
I have a problem with some cards I've made with Bootstrap. Here's the code:
formacion {
color: white;
position: relative;
}
.formacion .puesto {
position: relative;
z-index: 1;
}
.formacion .puesto img{
margin-top: 10px;
}
.formacion .empresa {
width: 100%;
position: absolute;
top: 52px;
background: rgb(255, 255, 255);
color: #000;
z-index: 0;
}
<div class="col-md-4 col-sm-4">
<h2>Formación<br><small>Experiencias académicas destacadas</small></h2>
<div class="col-md-12 capsula-formacion">
<div class="formacion row" style="background-color: #8224e3">
<div class="col-sm-3 col-md-3 puesto">
<img src="http://jdlcgarcia.es/wp-content/uploads/2016/10/Captura-de-pantalla-2016-10-17-a-las-14.50.26-150x150.png" alt=" # " title=" # " class="img-circle img-responsive center-block">
</div>
<div class="col-sm-9">
<h3 class="text-center">Ingeniero en informatica</h3>
</div>
<div class="col-sm-9 empresa" style="background-color: #e688ff">
<h4 class="text-center col-sm-offset-3">Universidad<br><small></small></h4>
<div class="row-fluid text-center col-sm-offset-3">
01-09-2004 - 01-04-2011 linea1
<br> linea2
<br> linea3
<br>
</div>
<div class="row-fluid">
</div>
</div>
</div>
</div>
<div class="col-md-12 capsula-formacion">
<div class="formacion row" style="background-color: #81d742">
<div class="col-sm-3 col-md-3 puesto">
<img src="http://jdlcgarcia.es/wp-content/uploads/2016/10/Captura-de-pantalla-2016-10-17-a-las-15.41.22-150x150.png" alt=" # " title=" # " class="img-circle img-responsive center-block">
</div>
<div class="col-sm-9">
<h3 class="text-center">Curso 1</h3>
</div>
<div class="col-sm-9 empresa" style="background-color: #e5ffa6">
<h4 class="text-center col-sm-offset-3">La institución<br><small></small></h4>
<div class="row-fluid text-center col-sm-offset-3">
01-10-2016 - 31-10-2016 linea1
<br> linea2
<br> linea3
<br>
</div>
<div class="row-fluid">
</div>
</div>
</div>
</div>
This code makes my divs look like this:
When they have to show like this (achieved by adding a fixed height to .capsula-formacion, but I don't want to put it because some of the divs could be longer than others):
I have always the same problem when I'm using absolute positioning so I'm assuming I'm doing it wrong. Which's the way to achieve my desired layout? Thank you in advance!!
Don't put absolute position in content div. You can manage image by position absolute.
You can set image by minus position and also you can set image width and height.
In responsive view you can manage image width and height by break point(Media query css).
I have a scenario where I need to center 3 divs of col3 in a row. When calculating, the answer shows 1.5, but what is the proper way of overcoming this challenge?
<div class="row">
<div class="col-md-offset-2 col-md-3" style="height: 50px; background-color: red">
</div>
<div class="col-md-3" style="height: 50px; background-color: green">
</div>
<div class="col-md-3" style="height: 50px; background-color: orange">
</div>
</div>
Here is a fiddle: https://jsfiddle.net/DTcHh/25558/
col-md-offset-2 is messing this up because it leaves col-1 for the other end. If there was col-md-offset-1.5 that would be brilliant but apparently no :(
I tried adding paddings and margins and it started becoming very messy, and thought I am directing to the wrong way.
What is the proper way of center the 3 divs without any hacky way?
I've come to a solution by erasing the offset class from the first inner div, assigning that particular .row container an additional class (.x in my example) and adding the following CSS for that class:
.x {
width: 100%;
margin: 0 12.5%;
}
Here is a codepen with the complete code: http://codepen.io/anon/pen/bwRZyJ
Try removing offset, and changing 3 for 4.
<div class="row">
<div class="col-xs-4" style="height: 50px; background-color: red">
</div>
<div class="col-xs-4" style="height: 50px; background-color: green">
</div>
<div class="col-xs-4" style="height: 50px; background-color: orange">
</div>
</div>
This puts 3 divs in a row, taking 33% of screen each one
UPDATE:
<div class="container">
<div class="row col-xs-10 col-xs-offset-1">
<div class="col-xs-3" style="height: 50px; background-color: red">
</div>
<div class="col-xs-3" style="height: 50px; background-color: green">
</div>
<div class="col-xs-3" style="height: 50px; background-color: orange">
</div>
</div><!--row-->
</div><!--container-->
I know this may be easy for most of you but I'm stuck with this issue.
I need to implement this design:
Layout Design
... and for now I've got this Current layout.The general structure is a row with col-3 and col-9, this col-9 has two rows, one for name and job title, and the other one for statistics in the page (col-3 for each of them). I need them to fill the height of his parent, but height property doesn't work. Which could be a clean solution? Thanks a lot.
Here is the structure, it's pretty simple tho.
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img ...>
<span>..</span>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">...</h2>
<h4 class="text-muted">...</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 stat">
<h3>...</h3>
<small>...</small>
</div>
...
</div>
</div>
Use position: relative on the parent and then position:absolute; bottom: 0; on the children.
Nice explanation there.
Flexbox would be my recommendation although CSS tables might be an option too.
Codepen Demo
Snippet Demo (view Fullscreen)
.user-image {
background: pink;
}
.user-image img {
display: block;
margin: auto;
}
.profile-header {
display: flex;
}
.right {
background: #c0ffee;
display: flex;
flex-direction: column;
}
.stats {
margin-top: auto;
}
.stat {
background: lightgrey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img src="http://www.fillmurray.com/300/200" alt="" />
<span>User Ranking</span>
</div>
<div class="col-md-9 right">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">User Name</h2>
<h4 class="text-muted">reference</h4>
</div>
</div>
<div class="row text-center stats">
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
</div>
</div>
I am using Skeleton Framework, and the layout I made using the grid system is like this:
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="three columns">
<br>
</div>
<div class="six columns" style="margin-top: 25px">
<img src="img/okay.jpg" width="50px" style="display:inline"/>
<p id="title" style="display:inline">{{title}}</p>
<p id="excerpt" style="display:inline">{{description}}</p>
<div id="describe me" style="display:inline"><span style="display:inline">{{name}}</span><span style="display:inline">{{date}}</span></div>
</div>
<div class="three columns">
<br>
</div>
</div>
</div>
It shows something like this:
But what I want is something like this:
How can this be achieved?
Result:
Responding to your code, although there are many alternate solutions for this, maybe even in their documentation.
First, try to avoid using inline styles.
Wrap your content inside a
class.
Vetical align the image to the top.
Remove the default margin
on the paragraph items.
.desc {
display: inline-block;
}
.desc p {
margin-bottom: 0;
}
.six img {
vertical-align: top;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="three columns">
<br>
</div>
<div class="six columns">
<img src="http://placehold.it/50x75" width="50px" />
<div class="desc">
<p id="title">{{title}}</p>
<p id="excerpt">{{description}}</p>
<div id="describe me"><span>{{name}}</span><span>{{date}}</span>
</div>
</div>
</div>
<div class="three columns">
<br>
</div>
</div>
</div>