I want to center two divs, into another div (horizontally). Can someone tell me how can I do it, in the bellow code? I want to have the two divs with the classes box-left and box-right, in the middle of the div with the class outer:
<html>
<head>
<style>
.container{
background-color: blue;
}
.outer{
text-align: center;
}
.width-600{
width:600px;
text-align:left;
margin-right: auto;
margin-left: auto;
}
.box-left{
background-color: yellow;
}
.box-right{
background-color: green;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="outer">
<div class="row width-600">
<div class="col-xs-12 col-md-4">
<div class="box-left">left</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="box-right">right</div>
</div>
</div>
</div>
</div>
</body> </html>
You can use display:flex and justify-content:center on .outer class ,would center the two rows
check the following snippet
.container {
background-color: blue;
}
.outer {
display:flex;
justify-content:center;
}
.width-600 {
width: 400px;
}
.box-left {
background-color: yellow;
}
.box-right {
background-color: green;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="outer">
<div class="row ">
<div class="col-xs-12 col-md-4">
<div class="box-left">left</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="box-right">right</div>
</div>
</div>
</div>
</div>
replace this body in your html and see if it works for you..
<body>
<div class="container">
<div class="row width-600">
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2"></div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
<div class="box-left">left</div>
</div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
<div class="box-right">right</div>
</div>
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2">
</div>
</div>
</div>
</body>
Related
I have random numbers of columns (generated by FOR loop).
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
</div>
</div>
I would like to center last row of columns. By default very last 1 or 2 columns are aligned to left. Is there any way to center them easily, or shall I skip using "col-" and use flexbox instead?
Source: CODEPEN.IO
You can add flex style to the parent of your column, which is .row here in this example.
.mycol {
background: tomato;
padding: 10px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: white;
}
.row{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
</div>
</div>
try like this.. i added align-center class to display center div
html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row align-center">
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
</div>
</div>
css
.mycol {
background: tomato;
padding: 10px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: white;
}
.align-center{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
Add this to the 4th div like so <div class ="col-sm-offset-2>
I need to align TEXT of container-fluid at same padding/margin like container.
You have example in this image:
EDIT: See 2nd photo, i want that padding to be the same on container-fluid / container, and when you minimize screen to be responsive..
.nopadding {
margin: 0 !important;
padding: 0 !important;
}
.bg {
background-color: #f3f3f3;
}
.left {
height: 650px;
}
.img-bg {
margin-right: 0px !important;
height: 650px;
background: url(http://placehold.it/850x650) no-repeat center center;
background-size: cover;
}
<section id="id1">
<div class="container-fluid">
<div class="row">
<div class="col-md-7 nopadding bg">
<div class="left">
<h2>TEXT</h2>
</div>
</div>
<div class="col-md-5 nopadding img-bg">
</div>
</div>
</div>
</section>
Here is my solution:
HTML part:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 image no-padding">
<div class="full-width"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
</div>
</div>
CSS part:
.center-flex {
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
.container-fluid .text {
background: #515467;
height: 650px;
}
.container .text {
background: #737373;
height: 300px;
}
.container-fluid .image {
background: #2D2D2D;
height: 650px;
}
.full-width {
width:100%;
height:100%;
height:calc(100% - 1px);
background-image:url('http://placehold.it/850x650');
background-size:cover;
}
.full-width img {
width:100%;
}
.no-padding {
padding: 0 !important;
}
.no-margin {
margin: 0 !important;
}
You can see the jsfiddle result: https://jsfiddle.net/DTcHh/18725/
try with this below code it may help you
.text1{
background : #0f74bd;
padding : 50px;
color : white;
font-weight : bold;
}
.image{
background : #000;
padding : 50px;
color : white;
font-weight : bold;
}
.text{
background : #9ea3a9;
padding : 50px;
color : white;
font-weight : bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6 text1">
TEXT1
</div>
<div class="col-sm-6 col-md-6 col-xs-6 image">
IMAGE
</div>
</div>
</div>
<div class="container text">
<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT2
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT3
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT2
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT3
</div>
</div>
</div>
</section>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<div style="background-color: blue" class="container-fluid">
<h1 style="text-align:center">Container-Fluid</h1>
<div class="row">
<div style="text-align:center" class="col-xs-6">TEXT 1</div>
<div style="text-align:center" class="col-xs-6">IMAGE</div>
</div>
<div style="background-color: yellow" class="container">
<h1 style="text-align:center">Container</h1>
<div class="row">
<div style="text-align:center" class="col-xs-6">Text 1</div>
<div style="text-align:center" class="col-xs-6">Text 2</div>
<div style="text-align:center" class="col-xs-6">Text 3</div>
<div style="text-align:center" class="col-xs-6">Text 4</div>
</div>
</div>
</div>
</body>
</html>
Is this what u want, using bootstrap
<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>
I have the following 4 squares (two rows and two columns):
<section id="gallery">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
</div>
</section>
I would like them to be displayed in a 4 square fashion and that the grid takes the whole width and height of the page. I also want it to be responsive and I don't want any spaces between each square.
I tried setting the css on my section tag like this:
section
{
height: 100vh;
}
But that had no effect. Does anybody know how to achieve this please?
Thank you
Try this as the CSS
section#gallery
{
height:100%;
width:100%;
}
div.row
{
height:50%;
}
div.col-lg-6.col-md-6.col-sm-6.col-xs-12
{
width:50%;
}
I think you are looking for something like this? https://jsfiddle.net/01djtnyd/
note: I changed all classes to "-6" so you can see it work easily in the fiddle
add class no-padding to the divs that are wrapping the img div
in the css add this:
.no-padding {
padding: 0 !important;
margin: 0;
}
.no-padding > div {
background-repeat: no-repeat;
background-size: cover;
height: 50vh;
}
You can do this with css flexbox and jQuery. Here are two options to maintain the square shape of each div.
Option 1:
HTML:
<section id="gallery">
<div class="container-fluid">
<div class="row grid-wrapper">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
<div class="row grid-wrapper">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
</div>
</section>
CSS:
section
{
height: 100vh;
}
.grid-wrapper{
display: flex;
flex-direction: row;
}
.grid-block{
margin: 0;
padding: 0;
background-color: #e2e2e2;
border: 1px solid #000;
}
Jquery:
$(document).ready(function(){
var grid_w = $(".grid-block").width();
$(".grid-block").height(grid_w);
});
Fiddle: https://jsfiddle.net/puxLmy1y/2/
Option 2 (without jQuery):
HTML: Same as above
CSS:
section
{
height: 100vh;
}
.grid-wrapper{
display: flex;
flex-direction: row;
}
.grid-block{
width: 50vh;
height: 50vh;
margin: 0;
padding: 0;
background-color: #e2e2e2;
border: 1px solid #000;
}
Fiddle: https://jsfiddle.net/puxLmy1y/3/
I want to create equal padding with all div under the .slideshow div. The problem is the last div right padding.
Now looks like this:
I want this, just with equal padding / space between divs and equal img heights:
The code:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="product-container">
<div class="slideshow">
<p>Test message, Test message</p>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
</div>
</div>
</div>
</div>
CSS:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.product-container{
padding: 0px 9%;
}
.slideshow{
background-color: #efeff1;
border: 1px solid #c5c5c7;
overflow: hidden;
}
.product-container img{
width:100%;
}
.col-lg-3{
padding-right:12px;
padding-left:0px;
}
Fiddle:
Fiddle
Just wrap all your image containing divs in additional .row:
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
</div>
And remove unnecessary styling:
.col-lg-3{
padding-right:12px;
padding-left:0px;
}
Also, you don't need to repeat responsive classes for all devices:
<div class="col-sm-3 col-md-3 col-lg-3"></div>
Can be written:
<div class="col-sm-3"></div>
Updated fiddle
Is this what you're trying to acheive?
.product-container {
padding: 0 2px 6px 2px;
overflow: hidden;
}
.slideshow {
background-color: #efeff1;
border: 1px solid #c5c5c7;
padding-left: 20px;
}
.product-container img {
width: 100%;
}
.product-container .pads {
padding: 0px 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="col-lg-12">
<div class="product-container">
<div class="row">
<div class="slideshow">
<p>Test message, Test message</p>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
</div>
</div>
</div>
</div>
I used the last-child selector. "Bla" is a class I added to the divs in question
.bla:last-child{
padding-right:0px ;
}
Had some issues with the height but used display: flex; to deal with that.
This wont work well in older browsers
http://jsfiddle.net/52VtD/12065/
If the right padding is removed it will have the result you are looking for.
http://jsfiddle.net/0rm0h547/light/
http://jsfiddle.net/0rm0h547/show/
css
.continuous {
padding-right: 0px;
}
html
..
<div class="col-sm-3 col-md-3 col-lg-3 continuous">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
..
Add an extra css class that removes padding-right.
You can give padding-right:0px; and you will get wat you want.
http://jsfiddle.net/52VtD/12070/
.col-lg-3{
padding-right:0px;
padding-left:0px;
}
Try:
remove
.col-lg-3{
padding-left:12px;
padding-right:0px;
}
add
.product-container .col-lg-3
{
padding-left:0px;
padding-right:0px;
}