I have two divs as shown in the image below:
In above image:
grey rectangle is the container div.
white rectangle is a div with transform: translateX(somevalue),
this rectangle is draggable. So, when dragging its translateX and translateY will be changed in the code.
blue rectangle is a div which should take up all the available width. Its height is fixed.
I don't have any code as I am trying to do this in react using react-draggable which uses translateX and translateY to drag an element.
I want a pure css solution because I don't want to re-render the component just for increasing the width of the div.
Note:
The blue rectangle is considered as div for the demo purpose only to make the example simpler to understand. In actual project the blue box will be a line and on that line I will put the distance between left edge of the container and left edge of the moving object. Something like a ruler.
Update:
Here is my code:
<div className="cover-print-area-settings-container">
<div style={{ background: 'black', height: 10, width: 'auto' }} />
<Draggable
bounds={{
left: 0,
top: 0,
right: 300,
bottom: 150
}}
>
<div id="cover-print-area-draggable-content" className="cover-print-area-settings-content">
<div className="contact-name">Contact Name</div>
<div className="side-by-side-start-center">
<PhoneIcon className="contact-detail-icon" />
<span>Mobile No</span>
</div>
<div className="side-by-side-start-center email-wrapper">
<EmailIcon className="contact-detail-icon" />
<span>Email</span>
</div>
<div className="side-by-side-start-center">
<LocationIcon className="contact-detail-icon contact-location-icon" />
<div className="contact-address-wrapper">
<p className="contact-address"> Address Line 1 </p>
<span className="contact-address-details"> Address Line 2 </span>
</div>
</div>
</div>
</Draggable>
</div>
Draggable element in the code is imported from react-draggable. Here is the documentation of react-draggable: https://github.com/mzabriskie/react-draggable
The css related to the above html looks like:
.cover-print-area-settings-container
height: 300px;
width: 600px;
overflow: auto
// height: 100%
background-color: #fff8dc
.cover-print-area-settings-content
border: 1px solid black
display: inline-block
vertical-align: top
.contact-name
font-size: 36px
text-align: left
.contact-detail-icon
margin-right: 7px
.contact-location-icon
padding-top: 12px
align-self: flex-start
.email-wrapper
margin-top: 5px;
margin-bottom: -8px;
.contact-address-wrapper
display: flex
flex-direction: column
justify-content: flex-start
.contact-address
text-align: left
align-self: flex-start
.contact-address-details
margin-top: -12px
text-align: left
align-self: flex-start
I would consider CSS variable in this case where you simply adjust the variable that will be used for the translate and the width:
.container {
padding:20px 0;
height:100px;
background:grey;
}
.blue {
height:100%;
background:blue;
display:inline-block;
width:var(--c);
margin-right:calc(var(--c) * -1);
}
.white {
height:100%;
width:100px;
background:white;
display:inline-block;
transform:translateX(var(--c));
}
<div class="container" style="--c:50px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:100px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:200px">
<div class="blue"></div><div class="white"></div>
</div>
Another idea would be to consider the blue part as a pseudo element of the white box and it will be easier to consider X/Y translation:
.container {
padding:20px 0;
height:100px;
background:grey;
overflow:hidden;
}
.white {
height:100%;
width:100px;
background:white;
display:inline-block;
transform:translateX(var(--c));
position:relative;
}
.white:before {
content:"";
position:absolute;
top:0;
left:-100vw;
right:100%;
bottom:0;
background:blue;
}
<div class="container" style="--c:50px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:100px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:200px">
<div class="blue"></div><div class="white"></div>
</div>
The idea is that certaint section of the page have two color by column:
[ Column left color red ] [ Column right color green ]
So basically the html right now looks like this.
<section id="foo">
<div class="wrapper-content">
<div class="col-sm-5 bg-red">Some content</div>
<div class="col-sm-7 bg-green">Some Other Content</div>
</div>
</section>
That gives me how I need it to look, full width 2 columns with different colours, the problem is the container.
First image is what I need
Second image is what I'm getting
Following code is not working at all....
<section id="foo">
<div class="wrapper-content">
<div class="col-sm-5 bg-red same-height"></div>
<div class="col-sm-7 bg-green same-height"></div>
<div class="container absolute">
<div class="col-sm-5">Some content</div>
<div class="col-sm-7">Some Other Content</div>
</div>
</div>
Colour on the left hast to go all the way left, the colour on the right all the way right, bu the content has to stay center and between the two columns.
Any ideas?
You have to add a container class to your content section too.
Or put your content section into the header wrapper div.
Example: If your header div is wrapped with a class <div class="container">...</div>, also wrap the content div with this class too.
Sample 1: if you want different sections for both header and content
<div class="container">
<div>Header</div>
</div>
<div class="container">
<div>Your content section</div>
</div>
Sample 2: if you dont need header and content sections to be separated
<div class="container">
<div>Header</div>
<div>Your content section</div>
</div>
This may work. You have to put divs of the same background color behind your foreground divs, absolutely positioned.
The container doesn't restrict the size at small widths, so you may have to expand the snippet to full page to see the results (the black borders are there to show the boundaries of your content areas)
.header {
background-color: beige;
margin-bottom: 20px;
}
.main-content {
position: relative;
}
.left-bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50%;
background-color: #dddddd;
}
.right-bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50%;
background-color: #aaaaaa;
}
.left-fg {
background-color: #dddddd;
border: 1px solid black;
padding: 30px 0;
}
.right-fg {
background-color: #aaaaaa;
border: 1px solid black;
padding: 30px 0;
}
<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.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header">Header</div>
<div class="main-content">
<div class="left-bg"></div>
<div class="right-bg"></div>
<div class="container">
<div class="row">
<div class="left-fg col-xs-5">Hello</div>
<div class="right-fg col-xs-7">Goodbye</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I have some floated elements and the container height is set to be at minimum the size of the viewport (min-height: 100vh), overflow: hidden.
However, in a responsive view (480x320) I find that the div is not expanding to contain the div which is holding the floated items. Therefore, the floated elements are cutting out of the div altogether as such:
I have tried adding the clearfix but this does not work.
HTML:
<div class="wrapper">
<div class="clients" id="clients">
<h2 class>Clients</h2>
<div class="clientLogoContainer">
<div class="clientLogo">
<img src="assets/ethiopian.jpg" class="fullSizeLogo">
</div>
<div class="clientLogo">
<img src="assets/kenya.jpg" class="fullSizeLogo">
</div>
<div class="clientLogo">
<img src="assets/southafrican.jpg" class="fullSizeLogo">
</div>
<div class="clientLogo">
<img src="assets/qatar.jpg" class="fullSizeLogo">
</div>
<div class="clientLogo">
<img src="assets/coalindia.jpg" class="fullSizeLogo">
</div>
</div>
CSS:
.clientLogoContainer {
max-width: 100%;
margin-left: 0;
margin-right: 0;
position: absolute;
top: 50%; /* move the div's top border to the half height of the outer div*/
transform: translateY(-50%); /* move the inner div up by half its height */
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.clearfix { /* used for the navigation bar to prevent li items from crashing into same line as the logo */
content: " ";
display: block;
clear: both;
}
Non-responsive view
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed last year.
I have a problem with my CSS. I have a panel form in my index page and I want to move it in the middle of the page vertically and horizontally. But I don't know how to create a CSS for this.
Here's my sample code:
<div class="login_header"></div>
<div class="container" style="text-align: center;">
<div class="col-md-6 col-md-offset-3">
<div class="panel_form panel panel-default">
<div class="panel-content">
<h1>test</h1>
</div>
<div class="panel-footer">
<p>test</p>
</div>
</div>
</div>
</div>
<footer class="footer"></footer>
I have a CSS like this:
.login_header { min-height: 50px; background-color: #f5f5f5; }
.panel_form {
/* I don't have an idea with this */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: #f5f5f5;
}
I am not good enough in CSS that's why I need your help. That's all thanks.. :)
Bootstrap 4:
<div class=" h-100 d-flex justify-content-center align-items-center">
<div>
Items are Centered horizontally and vertically
</div>
</div>
JsFiddle
Some of the other answers on this question use CSS hacks with tables and custom CSS classes. As the poster asked "How to center vertically and horizontally using Bootstrap", here is how to do that using only Bootstrap 4 utility classes:
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Your Content</p>
</div>
Something of note is that due to the styling on the parent div, when adding additional elements in the same div, they will appear beside the first one, rather than below it. To fix this, just add an additional div inside the parent to reset the styling.
<div class="d-flex justify-content-md-center align-items-center vh-100">
<div>
<p>Content 1</p>
<p>Content 2</p>
</div>
</div>
This does work with Bootstrap flex, I've found that it works best when placed inside a flex component like this, rather than wrapping the entire row.
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Content 1</p>
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Content 2</p>
</div>
</div>
</div>
</div>
Here is a breakdown of each class:
d-flex: Effectively display: flex, allows the div to grow or shrink depending on the amount of content.
justify-content-md-center: Justifies content in the center of the page, can also be replaced with justify-content-sm-center or justify-content-lg-center to change the breakpoint.
align-items-center: Centers the alignments of all items in a div.
vh-100: Sets the height of the div to 100vh, or 100 "vertical height". This ensures that the div is the correct height to allow for vertical alignment.
I found some of the answers very difficult to implement. However, this question seems to be one of the most basic ones and so here's an answer that someone else like me might find useful.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="display: flex; justify-content: center; align-items: center; height: 100vh">
hello world!
</div>
So, check this out; it's pretty cool
HERES A CODE PEN TO SEE IT IN ACTION
html, body 100% width and height;
container with relative or fixed positioning with 100% width and height, if you want to center in viewport. Size doesn't matter if you just want to ceter it within the element.
centered thing needs absolute positioning, a top and left of 50%, then use transform: translate(-50%, -50%);
regardless of its size, it's centered in viewport
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
#outer {
position: relative;
width: 100%;
height: 100%;
background: #BADA55;
}
#outer #container {
background-color: #f3f3f3;
color: #663399;
padding: 15px 25px;
width: 100%;
max-width: 300px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
LESS version
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
#outer {
position: relative;
width: 100%;
height: 100%;
background: #BADA55;
#container {
background-color: #f3f3f3;
color: #663399;
padding: 15px 25px;
width: 100%;
max-width: 300px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;top: 50%;
}
}
What worked for me is this:
<div class="container h-100">
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Your Content</p>
</div>
</div>
Asked and answered here: Twitter Bootstrap - how to center elements horizontally or vertically
But the short of it is:
<div class="center-block">...</div>
Link to the Bootstrap docs: http://getbootstrap.com/css/#helper-classes-center
Brothers check this one it's working...
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
**<div class="container" style="display: flex; justify-content: center; align-items: center; height: 100vh">
<div class="jumbotron">
hello world!
</div>**
</div
</body>
</html>
While I haven't found a solution to the general problem in pure Bootstrap 5, here is a solution that works with just a little additional CSS. Please test by changing the browser window size, or using the Responsive Mode of your browser, but not both at once, since they don't behave well together.
This example centers a 50% wide and high div, and centers the text inside it.
It works perfectly down to about a 200px by 200px window.
See Code Pen https://codepen.io/david263/pen/eYvOGOB and use Settings > Full screen mode.
<style type="text/css">
/* Required for proper centering */
html, body{
height:100vh;
width:100vw;
}
</style>
<!-- Outer container, full page width and height, red border -->
<div class="container-fluid d-flex justify-content-center align-items-center" style="height:100vh; overflow:hidden; border: 2px solid red">
<!-- Inner row, half the width and height, centered, blue border -->
<div class="row text-center d-flex align-items-center" style="overflow:hidden; width:50vw; height:50vh; border: 1px solid blue">
<!-- Innermost text, wraps automatically, automatically centered -->
<h2>Center This Text (Even if Wrapped) in all Viewport Sizes</h2>
</div> <!-- Inner row -->
</div> <!-- Outer container -->
Give the outer div
display: table;
and the inner div
display: table-cell
Then you can use
vertical-align: center
on the inner div
Read further: Twitter Bootstrap - how to center elements horizontally or vertically
I need to stack these two divs on top of each other but am having trouble finding a way to make it possible. I need to keep al the text inside in the same positions but need to be able to have the divs sit on top of one and other without setting absolute positions for them.
Here is what I have...
<body>
<div style="position:relative;">
<div style="position:absolute">
<p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
<p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
</div>
</div>
<div style="position:relative;">
<div style="position:absolute">
<p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
<p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
</div>
</div>
</body>
You should put the content of both your divs inside an outer div which has "position:relative", and put absolute positioning on your inner divs, and add a z-index to each of them. Then the larger z-index is placed over the smaller one.
<body>
<div style="position:relative;">
<div style="position:absolute;z-index:0;">
<p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
<p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
</div>
<div style="position:absolute;z-index:1;">
<p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
<p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
</div>
</div>
</body>
Perhaps this simple example will help you:
Link to fiddle
<body>
<div class="one">
Content one
</div>
<div class="two">
Content two
</div>
</body>
CSS:
.one{
color:red;
position:absolute;
left:0;
top:0;
z-index:2;
}
.two{
color:blue;
position:absolute;
left:0;
top:0;
z-index:1;
}
By positioning both divs absolutely, we can then use the left and top properties, set them to the same left and top positions (it can be in pixels, percent, etc), and then determine which one should be placed on top of the other by varying the z-index. The higher z-index numbered div will be the one on top, so the .one div will be on top and you will see more red than blue. Swap the values around so that .one has z-index:1 and .two has z-index:2, and you will see more blue (since those are the font colours).
From here, you can put the rest of your content into the divs in my example.
You have a couple options:
Use absolute postions on your divs. http://jsfiddle.net/sUyS3/1/
You could use negative margins on your second div.
<div style="margin-top: -25px;">
The best way to do so is by using CSS grid.
This is a blog post explaining how to achieve this: https://zelig880.com/how-to-stack-two-elements-on-top-of-each-other-without-using-position-absolute
And this is a codepen with a live example:https://codepen.io/zelig880/pen/oNdZWNa
Quick code:
.container_row{
display: grid;
}
.layer1, .layer2{
grid-column: 1;
grid-row: 1;
}
.layer1{
color: blue;
background: red;
animation-direction: reverse;
}
.layer2{
color: white;
background: blue;
}
.layer1, .layer2 {
animation-name: fade;
animation-duration: 10s;
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="container_row">
<div class="layer1">
I am the layer behind
</div>
<div class="layer2">
I am actually on top
</div>
</div>
<div class="container_row">
Yuppi! This line is positioned successfully! This would not have been the case with position:absolute
</div>