How to center a square div in middle of two columns in bootstrap?
Question
I have two columns in a row with col-6 and a jumbotron this is my code:
<div class="jumbotron text-left" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); background-size: cover;">
<h1>Test</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<p class="text-center square">TEST</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit </h3>
</div>
<div class="col-sm-6">
<h3>test</h3>
</div>
</div>
</div>
And this is my styling:
.square {
height: 50px;
width: 50px;
background-color: #9FB6A6;
border-radius: 3px;
}
And this is what I wanna achieve:
What I have tried:
I have used the text-center class and z-index . The problem is I can't get the square div over the jumbotron like in the sketch.
Here you have a jsfiddle so you can see the behaviour:
https://jsfiddle.net/rmjy5pch/
Can somebody point me in the right direction?
4 answers
solution1
2 ACCPTED 2020-01-14 14:19:18
You can achieve that using absolute positioning like this
https://jsfiddle.net/oqyzsxc3/3/
<body>
<div class="jumbotron text-left" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); background-size: cover;">
<h1>Test</h1>
</div>
<div class="container-fluid position-relative">
<div class="square-container text-center">
<p class=" square">TEST</p>
</div>
<div class="row">
<div class="col-sm-6">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit </h3>
</div>
<div class="col-sm-6">
<h3>test</h3>
</div>
</div>
</div>
</body>
.square {
height: 50px;
width: 50px;
background-color: #9FB6A6;
border-radius: 3px;
margin: 0 auto;
}
.square-container {
position: absolute;
top: -60px;
width: 100%;
}
solution2
0 2020-01-14 14:09:40
try to add margin:0 auto; to the .square
solution3
0 2020-01-14 14:10:22
.square {
height: 50px;
width: 50px;
background-color: #9FB6A6;
border-radius: 3px;
margin: -20px auto 0;
}
Try adding margin:0 auto to the square class?
solution4
0 2020-01-14 14:29:30
Using HTML and CSS
.root{ display:flex; flex-direction:column; background:white; border: 0.5px solid black; position: relative; } .second{ display:flex; } .first{ height:120px; border-bottom: 0.5px solid black; } .second div{ flex: 1; height:120px; } .centerTex{ position:absolute; top:50%; left: 50%; transform: translate(-50%, -50%); background: red; color:white; padding: 10px 20px; border-radius:2px; }
<div class="root"> <div class="first"> Jumbotron </div> <div class="centerTex">Test</div> <div class="second"> <div>Col -6</div> <div>Col -6</div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.