How would I vertically align text to the middle of a caption that has a position of absolute. I want the text whether it be 1 line or 2 lines for it to be in the middle of the green block.
Here is a example:
https://jsfiddle.net/DTcHh/7467/
<div class="row">
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.holder {
position:relative;
display: table;
width: 100%;
}
.background {
background: #000;
height: 150px;
width: 100%;
}
.text {
position: absolute;
left:0;
right: 0;
bottom: 0;
text-align: center;
}
h4 {
background: green;
font-size: 1em;
margin: 0;
padding: 5px 10px;
min-height: 50px;
}
UPDATED
Like this ....
FIDDLE v4
This version I believe may have it.
Changed the <h4> to a <p>
Removed from <p>
width: 100%;
display: table-cell;
Added to <p>
margin-left: auto;
margin-right: auto;
transform: translateY(25%);
Changes to <p>
padding: 5px 10px; -TO- padding: 0px 10px;
Use line-height on h4 style with value more than double of the font-size:
h4 {
background: green;
font-size: 1em;
margin: 0;
padding: 5px 10px;
min-height: 50px;
line-height: 2.2em;
}
Checkout this DEMO
Related
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
I have managed to make vertical spaces between the columns by adding padding to the rows. But now the horizontal spaces between the contents are ways too much. How can I configure the spacing between them?
That large horizontal space is because of the fixed width of the content class if you remove that, you'll see it grow.
You can set the width of the content in % or add a margin to the content class.
.container {
text-align: center;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
}
.row{
padding:15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col4">
<div class="content">1x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x3</div>
</div>
</div>
<div class="row ">
<div class="col-md-4 col4">
<div class="content">2x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x3</div>
</div>
</div>
<div class="row col4 col4">
<div class="col-md-4 col4">
<div class="content">3x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS Grid to achieve that layout you desire:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 5px;
position:absolute;
left:50%;
transform:translateX(-50%);
width:80%;
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height:100px;
max-width: 350px;
}
<div class="grid-container">
<div class="item">1x1</div>
<div class="item">1x2</div>
<div class="item">1x3</div>
<div class="item">2x1</div>
<div class="item">2x2</div>
<div class="item">2x3</div>
<div class="item">3x1</div>
<div class="item">3x2</div>
<div class="item">3x3</div>
</div>
Using flexbox:
.flex-container {
display: flex;
/*Generates a flexbox layout with default flex direction as row */
width: 100%;
/* Not really required */
align-items: center;
/*Aligns contents vertically */
justify-content: center;
/*Aligns contents horizontally */
text-align: center;
/*Aligns further text in the center */
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height: 400px;
width: 300px;
margin: 5px;
}
<div class="flex-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="flex-container">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="flex-container">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Use float:left; with class content as below:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
float: left;
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
If I'm reading your request correctly, you are just asking how to make it look like the boxes are in the center of the page, and they are evenly spaced. see if this is what you're looking for:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.col-md-4 {
margin: 5px -10px 0px -4px;;
}
play with the numbers until you get the desired location.
Though I would strongly suggest that you add your own class in addition to col-md-4 to the boxes, which will prevent this new setting to col-md-4 from affecting any future use of this bootstrap class.
in other words . . .
CSS:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.box-move {
margin: 5px -10px 0px -4px;;
}
and HTML:
<div class="container">
<div class="row">
<div class="col-md-4 box-move">
<div class="content">1x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">2x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">3x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x3</div>
</div>
</div>
</div>
You can remove a lot of the stuff there and simplify it to make it responsive width a set margin:
.contents {
background-color: black;
color: white;
height: 500px;
margin: 20px 0px;
}
<div class="container-fluid text-center">
<div class="row">
<div class="col-md-4">
<div class="contents">1x1</div>
</div>
<div class="col-md-4">
<div class="contents">1x2</div>
</div>
<div class="col-md-4">
<div class="contents">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">2x1</div>
</div>
<div class="col-md-4">
<div class="contents">2x2</div>
</div>
<div class="col-md-4">
<div class="contents">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">3x1</div>
</div>
<div class="col-md-4">
<div class="contents">3x2</div>
</div>
<div class="col-md-4">
<div class="contents">3x3</div>
</div>
</div>
</div>
</div>
Greetings i am kinda new to boostrap, Anyhow, I am trying to Create is, Boxes to look like this (right side):
And so far i got nothing. i used padding but it mess up my grid system, what i did was give a col-sm-8 for picture side and a col-sm-4 for boxes however it is where it gets tricky it always mess my grid system. this is my html. could you help me out a little bit?
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="xxxx" />
</div>
<div class="col-sm-4">
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Oven
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Cookers
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Microwave Ovens
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Steamers
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Cooker hoods
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Hobs
</div>
</div>
</div>
</div>
</div>
You are missing a row class, it's mandatory for nested rows/columns, so you can do this (go full page to see the result as you want) :
.box {
background-color: grey;
padding: 25px;
text-align: center;
vertical-align: middle;
margin: 10px;
}
img {
max-width: 100%;
}
<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-8">
<img src="https://lorempixel.com/800/400/" />
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">
<div class="box">
Oven
</div>
</div>
<div class="col-sm-6">
<div class="box">
Cookers
</div>
</div>
<div class="col-sm-6">
<div class="box">
Microwave
</div>
</div>
<div class="col-sm-6">
<div class="box">
Steamers
</div>
</div>
<div class="col-sm-6">
<div class="box">
Cooker hoods
</div>
</div>
<div class="col-sm-6">
<div class="box">
Hobs
</div>
</div>
</div>
</div>
</div>
</div>
You can read more about grid nesting
Im trying to create a template like this one:
But im not sure if I have to created with css, bootstrap or both.
This is what I have
HTML:
<div class="square">
<div class="col-md-12">
<div class="col-md-2">
<img src="../Images/logo.png" class="text-left" style="width:120px;"/>
</div>
<div class="col-md-5 text-center">
<h4>Alert PLC</h4>
</div>
<div class="col-md-5 text-center">
<h4>No. Alert: 44445543</h4>
</div>
<div class="col-md-10">
<hr class="line" />
</div>
</div>
CSS
body {
background-color: #aeaeae;
}
.square {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.line {
height: 4px;
color: #000000;
border-radius: 2px;
background-color: #000000;
}
Here is JSfiddle demo
Hope it will help you.I made several changes in html.
HTML:
<body>
<div class="square">
<div class="row">
<div class="col-md-4">
<img src="https://image.freepik.com/free-vector/retro-retro-hipster-bicycle-design_23-2147491723.jpg" class="pull-left" style="width:120px;"/>
</div>
<div class="col-md-4 text-center">
<h4>Alert PLC</h4>
</div>
<hr class="line" />
<div class="col-md-4 text-center">
<h4>No. Alert: 44445543</h4>
</div>
</div>
</div>
</body>
<div class="row">
<div class="col-xs-6">
<img src="img.png" width="100%" />
</div>
<div class="col-xs-6">
<div class="row"><p>Main text</p></div>
<div class="row"><p>More...</p></div>
</div>
</div>
I need this result:
So I need a picture which takes up 50% of the screen width and then a big title which is centered horizontally, but vertically is on top; and "more..." text which is to the right horizontally, but on the bottom vertically. How do I manage to do this? Can someone help me, please?
Here is your solution: use display flex to make both columns have same height, then use position relative ad absolute to position your columns
.title{
background-color: red;
text-align: center;
}
.title h1{
width: 100%;
}
.description{
background-color: yellow;
}
/*NEW*/
.row{
display:flex;/*makes col have same height*/
}
.details{
position: relative !important;
}
.description{
position: absolute !important;
bottom: 0;
}
.description p{
width: 100%;
text-align: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row col-xs-12">
<div class="col-xs-6">
<img src="https://placehold.it/150/150" width="100%" />
</div>
<div class="col-xs-6 details">
<div class="row col-xs-12 title">
<h1>Main text</h1>
</div>
<div class="row col-xs-12 description">
<p>More...</p>
</div>
</div>
</div>
Is it this you mean?
.title{
background-color: red;
text-align: center;
}
.description{
background-color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row col-xs-12">
<div class="col-xs-6">
<img src="https://placehold.it/150/150" width="100%" />
</div>
<div class="col-xs-6 details">
<div class="row col-xs-12 title">
<h1>Main text</h1>
</div>
<div class="row col-xs-12 description">
<p>More...</p>
</div>
</div>
</div>
there's some problems with responsive grid system to me.
http://imageshack.com/a/img537/9687/4H48G0.jpg
http://imageshack.com/a/img539/8265/ANvr0Y.jpg - problem is here
My source code:
CSS
<style type="text/css">
.wrapper {
height: 100%;
text-align: center;
margin: 0 auto;
}
img { max-width:100% !important;
height:auto;
display:block;
}
.text {
color: #fff;
text-shadow:0px 2px 10px #000;
height: 100%;
left: 0;
position: absolute;
text-align: center;
top: 0;
font-size: 22px;
width: 100%;}
.box {
border: 1px dashed #000;
overflow: hidden;
position: relative;
}
.tb_floater {
font-size: 1.5em;
margin-top: 20%;
padding-top: 10%;
}
.box.tall {
height: 300px;
}
.box.tall > a > img {
height: auto;
}
</style>
HTML
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-4 box tall">
<a href="#">
<img src="http://www.websailer.com/wp-content/uploads/2013/07/www_image.jpg">
</a>
<div class="text tall">
<div class="tb_floater">
<p>Loren ipsum shit amet<br/>Loren ipsum</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-6</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-2</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-2</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-6</div>
</div>
<div class="row">
<div class="pull-right col-xs-6 col-md-4 box tall">
<a href="#">
<img src="http://www.websailer.com/wp-content/uploads/2013/07/www_image.jpg">
</a>
<div class="text tall">
<div class="tb_floater">
<p>Loren ipsum shit amet<br/>Loren ipsum</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-6</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-2</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-6</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-2</div>
</div>
That empty field is problem when i resize the browser, any solution ?