I want to divide my div "tile-container" with the width of 100% into 5 equal pieces. I thought that creating 5 divs inside with the width of 25% would solve the problem but it didn't. Container seems to be to small. Here is my code:
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="tile-container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
</div>
</div>
</div>
</body>
And stylsheet.css file:
.tile-container{
position: relative;
border: solid #BDBDBD 2px;
margin: 5px 0px;
width:100%;
}
.tile{
width: 20%;
min-height:22px;
border: 1px #BDBDBD solid;
display: inline-block;
}
The problem is with the spacing in the html between the divs, to ignore the spacing you can add font-size:0 to the .tile-container, then use a specific font-size to the .tile :
.tile-container{
position: relative;
border: solid #BDBDBD 2px;
margin: 5px 0px;
width:100%;
font-size:0; /* add */
}
.tile{
font-size:20px; /* or whatever you want */
width: 20%;
min-height:22px;
border: 1px #BDBDBD solid;
display: inline-block;
}
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="tile-container">
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
</div>
</div>
</div>
</div>
</body>
Another method would be to comment out the spaces :
.tile-container{
position: relative;
border: solid #BDBDBD 2px;
margin: 5px 0px;
width:100%;
}
.tile{
width: 20%;
min-height:22px;
border: 1px #BDBDBD solid;
display: inline-block;
}
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="tile-container">
<div class="tile">A</div><!--
--><div class="tile">B</div><!--
--><div class="tile">C</div><!--
--><div class="tile">D</div><!--
--><div class="tile">E</div>
</div>
</div>
</div>
</div>
</body>
Related
This question already has answers here:
Why the content is not covered by the background of an overlapping element?
(8 answers)
Closed 2 years ago.
I'm trying to place a div on top of another but I don't understand why text inside div.servicios-info is over the image but the background-color isn't.
.imagen-servicio img {
border: 6px #ffffff solid;
}
.servicio-info {
background-color: #ec6a6a;
margin-top: -5rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<div class="imagen-servicio">
<img src="https://via.placeholder.com/300.png" class="img-fluid">
<div class="servicio-info">
<h3 class="text-uppercase">
<span class="text-lowercase">know about</span> <br> us
</h3>
read more
</div>
</div>
</div>
</div>
</div>
You can try something like this:
CSS
.servicio-info {
position: relative;
background-color: #ec6a6a;
margin-top: -5rem;
z-index:10
}
This code seems to do it.
<!DOCTYPE html>
<html>
<head>
<style>
.imagen-servicio img {
border: 6px #ffffff solid;
z-index: -1;
position: relative;
}
.servicio-info {
background-color: #ec6a6a;
margin-top: -5rem;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<div class="imagen-servicio">
<img src="https://via.placeholder.com/300.png" class="img-fluid">
<div class="servicio-info">
<h3 class="text-uppercase">
<span class="text-lowercase">know about</span> <br> us
</h3>
read more
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Why is align-content: space-around not working here? What is the fix? Need to align columns 3 and 4 to bottom.
.row {
background: #f8f9fa;
}
.col {
border: solid 1px red;
padding: 10px;
height: 200px;
}
.col-sm-6 {
border: 1px solid green;
}
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
<div class="row align-content-around">
<div class="col-sm-6">
1
</div>
<div class="col-sm-6">
2
</div>
<div class="col-sm-6">
3
</div>
<div class="col-sm-6">
4
</div>
</div>
</div>
</div>
</div>
Fiddle - https://jsfiddle.net/afelixj/y9perjhf/
Your row has auto height - add height: 100% or h-100 class to it - see demo below:
.row {
background: #f8f9fa;
}
.col {
border: solid 1px red;
padding: 10px;
height: 200px;
}
.col-sm-6 {
border: 1px solid green;
}
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
<div class="row align-content-around h-100">
<div class="col-sm-6">
1
</div>
<div class="col-sm-6">
2
</div>
<div class="col-sm-6">
3
</div>
<div class="col-sm-6">
4
</div>
</div>
</div>
</div>
</div>
I am using boostrap to make a masonry layout. But I am having a problem. As you can see in my code, I have 5 divs. I want Div 4 and 5 to move up(check the attached image) but I have no idea how to do it. I can do it with margin-top but it will break the responsive layout. So, what's the possible solution for this? I am a newbie, it will be a great help. Thanks in advance.
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<style>
.div1{
border: 2px solid;
}
.div2{
border: 2px solid;
}
.div3{
border: 2px solid;
height: 100px;
}
.div4{
border: 2px solid;
}
.div5{
border: 2px solid;
height: 40px;
}
</style>
</head>
<body>
<div class="col-md-12">
<div class="col-md-4 div1">Div1</div>
<div class="col-md-4 div2">Div2</div>
<div class="col-md-4 div3">Div3</div>
<div class="col-md-8 div4">Div4</div>
<div class="col-md-8 div5">Div5</div>
</div>
<!-- Loading minified js. jQuery and Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The current layout is:
But I want it like this:
In this specific case you can use nesting..
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6 div1">Div1</div>
<div class="col-md-6 div2">Div2</div>
<div class="col-md-12 div4">Div4</div>
<div class="col-md-12 div5">Div5</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12 div3">Div3</div>
</div>
</div>
</div>
</div>
Or, use pull-right on div3...
<div class="col-md-12">
<div class="row">
<div class="col-md-4 div1">Div1</div>
<div class="col-md-4 div2">Div2</div>
<div class="col-md-4 div3 pull-right">Div3</div>
<div class="col-md-8 div4">Div4</div>
<div class="col-md-8 div5">Div5</div>
</div>
</div>
Demo of both solutions
If you want to use Masonry, see my answer for Bootstrap Masonry solutions.
It wouldn't be masonry, per say, but from your image what you want is
<div class='row'>
<div class='col-md-8'>
<div class='row'>
<div class='col-md-6 div1'>Div1</div>
<div class='col-md-6 div2'>Div2</div>
<div class='col-md-12 div4'>Div4</div>
<div class='col-md-12 div5'>Div5</div>
</div>
</div>
<div class='col-md-4 div3'>Div3</div>
</div>
you can do it this way:
// external js: masonry.pkgd.js
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<style>
.div1{
border: 2px solid;
height: 40px;
}
.div2{
border: 2px solid;
height: 40px;
}
.div3{
border: 2px solid;
height: 100px;
}
.div4{
border: 2px solid;
height: 40px;
}
.div5{
border: 2px solid;
height: 40px;
}
</style>
</head>
<body>
<div class="col-md-12">
<div class="container-fluid">
<!-- add extra container element for Masonry -->
<div class="grid">
<div class="grid-sizer col-xs-4"></div>
<div class="grid-item col-xs-4 div1"></div>
<div class="grid-item col-xs-4 div2"></div>
<div class="grid-item col-xs-4 div3"></div>
<div class="grid-item col-xs-8 div4"></div>
<div class="grid-item col-xs-8 div5"></div>
</div>
</div>
</div>
<!-- Loading minified js. jQuery and Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I am new to Bootstrap, and would like to move my box2 and box3 divs to the bottom of the column on the right side of the page. I can't seem to work out how to do this without resorting to an empty row that is above box2 and box3. Here is my current html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" 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>
<style type="text/css">
.jumbotron {
text-align: center;
padding-bottom: 5px;
}
h2 {
margin: auto;
}
.box1 {
min-height: 450px;
border-style: dotted;
}
.box2 {
min-height: 150px;
margin-bottom: 10px;
border-style: dotted;
}
.box3 {
min-height: 30px;
border-style: dotted;
}
</style>
</head>
<body style="background:pink;">
<div class="jumbotron" style="background:pink;">
<h2>Lyrical</h2>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="box1">FORM</div>
</div>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-12">
<div class="box2">Description</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="box3">Credits</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Is there a way of doing this using the Bootstrap grid?
Any help is much appreciated!
Try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
var bottom1 = $('.box1').outerHeight(true);
var bottom2 = $('.right-sides-columns').outerHeight(true);
var topheight = bottom1 - bottom2;
$('.right-sides-columns').css("margin-top", topheight + "px");
});
</script>
<style type="text/css">
.jumbotron {
text-align: center;
padding-bottom: 5px;
}
h2 {
margin: auto;
}
.box1 {
min-height: 450px;
border-style: dotted;
}
.box2 {
min-height: 150px;
margin-bottom: 10px;
border-style: dotted;
}
.box3 {
min-height: 30px;
border-style: dotted;
}
</style>
</head>
<body >
<div class="jumbotron" >
<h2>Lyrical</h2>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="box1">FORM</div>
</div>
<div class="col-lg-3 right-sides-columns">
<div class="row">
<div class="col-lg-12">
<div class="box2">Description</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="box3">Credits</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Not a specific bootstrap answer, but a more general approach:
It is possible to push an element to the bottom of it's parent with flexbox's align-self.
.flex-row {
display: flex;
flex-direction: row;
align-items: flex-start;
height: 300px;
}
.flex-col {
background: rebeccapurple;
}
.flex-col--end {
align-self: flex-end;
}
<div class="flex-row">
<div class="flex-col">
<p>Lorem Ipsum</p>
</div>
<div class="flex-col flex-col--end">
<p>Dolor Sit</p>
</div>
</div>
I am having some problems creating this layout.
Demo.
This is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="row " style="">
<div class="col-md-6 news_basic_style">
<div class="newsproducts_style">
<img src="http://placehold.it/150x150">
</div>
</div>
<div class="col-md-6 news_basic_style">
<div class="newsproducts_style">
<img src="http://placehold.it/150x150"></div>
</div>
</div>
<div class="row">
<div class="col-md-6 news_basic_style">
<div class="newsproducts_style">
<img src="http://placehold.it/150x150"></div>
</div>
<div class="col-md-6 news_basic_style">
<div class="newsproducts_style">
<img src="http://placehold.it/150x150"></div>
</div>
</div>
</body>
</html>
CSS
body{
background-color:#99B3FF;
}
.news_basic_style{
border-radius: 20px;
box-shadow:5px 5px 10px rgba(0,0,0,0.65);
}
.news_basic_style{
background-color:white;
width:170px;
margin:20px;
}
update
Thanks for the edit TRiG
solution demo:
Apply the border-radius and box-shadow directly to the image and remove the background, like so:
img{
border-radius: 20px;
box-shadow:5px 5px 10px rgba(0,0,0,0.65);
}
http://jsfiddle.net/LrmfU/