I want to place OR text on top of the vertical rule(border-right) as shown in the image. No idea how to place it.
.left_col {
border-right: 1px solid black;
}
<div class="container mt-5">
<div class="row">
<div class="col-md-6 left_col">
/* left column content */
</div>
<div class="col-md-6">
/* right column content */
</div>
</div>
</div>
You can absolutely position a pseudo element:
.left_col {
position: relative;
border-right: 1px solid black;
}
.left_col:after {
content: 'or';
display: inline-block;
padding: 0.25em 0.5em;
position: absolute;
top: 50%;
left: 100%;
transform: translate(-50%, -50%);
background: orange;
}
/*following just for this demo not needed*/
.row {
display: flex;
}
.col-md-6 {
height: 100px;
width: 50%;
}
<div class="container mt-5">
<div class="row">
<div class="col-md-6 left_col">
/* left column content */
</div>
<div class="col-md-6">
/* right column content */
</div>
</div>
</div>
why don't you do this?
<div class="container mt-5">
<div class="row">
<div class="col-md-6 left_col">
<span>OR<span>
/* left column content */
</div>
<div class="col-md-6">
/* right column content */
</div>
</div>
</div>
in your css
.left_col {
position: relative;
}
span{
position: absolute;
top: 40%;
right: -10px;
}
Related
I made the changes as you described but when I check to see how it would look on the phone the blue box and the pink box are separated which I want to be together. I have attached a screenshot of how it looks and I want it to look similar to the desktop version.
I am not sure which entity might be causing this issue.
--EDIT--
Just to provide more clarity here is a screenshot of how the container_tag and container_box should look in the mobile screen (365px).
Should look like this
Is looking like this
.side_feedback{
background-color: pink;
padding: 10px;
height: 300px;
width: 180px;
border-radius: 10%;
margin-left: 17px;
}
.container_tag{
background-color: royalblue;
min-height: 200px;
max-width: 2rem;
border: 6px solid royalblue;
float: left;
}
.tag{
transform: rotate(-90deg);
position: relative;
top: 8rem;
}
.container_box{
background-color: pink;
min-height: 200px;
border-left: 6px solid white;
width: 95%;
position: relative;
float: left;
}
<div class="container-fluid">
<div class="row mb-4 g-5">
<div class="order-2 order-sm-1 col-lg-2 col-md-2 col-xs-10">
<div class="col-md">
<div class="side_feedback">
<p>Give us feedback!</p>
</div>
</div>
</div>
<div class="order-1 order-sm-2 col-10">
<div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 row-cols-lg-1 row-cols-auto g-4">
<div class="col-12">
<div class="container_tag">
<h3 class="tag">TEXT</h3>
</div>
<div class="container_box">
</div>
</div>
<div class="col-12">
<div class="container_tag">
<h3 class="tag">TEXT</h3>
</div>
<div class="container_box">
</div>
</div>
<div class="col-12">
<div class="container_tag">
<h3 class="tag">TEXT</h3>
</div>
<div class="container_box">
</div>
</div>
</div>
</div>
</div>
If you’re referencing the large vertical white space below the two pink blocks, that’s there because you’re using position: relative on the pink container_box. position: relative positions the element normally (below your container_tag div) and then moves the element to the new position — the original space remains.
To get rid of the white space, add float: left to the styles for both of your containers.
.container_tag {
background-color: royalblue;
min-height: 180px;
width: 9%;
max-width: 3.2rem;
float: left;
position: relative;
}
.tag {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) rotate(-90deg)
}
.container_box {
background-color: pink;
min-height: 180px;
border-left: 6px solid white;
width: 91%;
position: relative;
float: left;
}
#media (min-width:768px) {
.container_box {
width: calc(100% - 3.2rem);
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 px-0">
<div class="row gx-0">
<div class="col-12 mb-3">
<div class="container_tag">
<h3 class="tag">Text</h3>
</div>
<div class="container_box">
</div>
</div>
<div class="col-12 mb-3">
<div class="container_tag">
<h3 class="tag">Text</h3>
</div>
<div class="container_box">
</div>
</div>
</div>
</div>
</div>
</div>
One other note - you don't need to give the same column class for different breakpoints (col-lg-10 col-md-10 col-xs-10). Just use col-10 and that will apply to all of the following breakpoints. And BS-5 doesn't use xs - that was for Bootstrap 3.
I am trying to build a custom stepper with CSS and I am hitting a wall to center the label on top of each step.
I've build a quick and simplified version of my current implementation :
.wrapper {
display: flex;
}
.circle-wrapper {
flex: 1;
}
.circle-wrapper.active>.circle {
background-color: #3490DC;
transform: scaleX(1.2) scaleY(1.2)
}
.circle-wrapper.complete>.circle {
background-color: #38C172;
}
.circle {
width: 34px;
height: 34px;
background-color: #B8C2CC;
border-radius: 100%;
}
.label {
margin-bottom: 10px;
}
.wrapper> :last-child {
flex: none;
}
.line {
height: 4px;
width: 100%;
background-color: #1F9D55;
position: relative;
bottom: 19px;
}
<div class="wrapper">
<div class="circle-wrapper complete">
<div class="label">Label 1</div>
<div class="circle"></div>
<div class="line"></div>
</div>
<div class="circle-wrapper active">
<div class="label">Label 2 with a longer name</div>
<div class="circle"></div>
<div class="line"></div>
</div>
<div class="circle-wrapper">
<div class="label">Label 3</div>
<div class="circle"></div>
<div class="line"></div>
</div>
<div class="circle-wrapper">
<div class="label">Label 4</div>
<div class="circle"></div>
</div>
</div>
You can see it here in this codepen
So far so good, but I want to center the label over the circle div without impacting the flex size between each circle and I can't manage to do it.
Any advice ?
You can use a left and a transform to move it into the centre:
.wrapper {
display: flex;
}
.circle-wrapper {
flex: 1;
position:relative;
}
.circle-wrapper.active>.circle {
background-color: #3490DC;
transform: scaleX(1.2) scaleY(1.2)
}
.circle-wrapper.complete>.circle {
background-color: #38C172;
}
.circle {
width: 34px;
height: 34px;
background-color: #B8C2CC;
border-radius: 100%;
}
.label {
position:relative;
left: 17px; /* move left 17px (half of circle width) */
margin-bottom: 10px;
transform: translateX(-50%); /* move it backwards 50% of itself */
text-align: center; /* align text in centre */
}
.wrapper> :last-child {
flex: none;
}
.line {
height: 4px;
width: 100%;
background-color: #1F9D55;
position: relative;
bottom: 19px;
}
<div class="wrapper">
<div class="circle-wrapper complete">
<div class="label">Label 1</div>
<div class="circle"></div>
<div class="line"></div>
</div>
<div class="circle-wrapper active">
<div class="label">Label 2 with a longer name</div>
<div class="circle"></div>
<div class="line"></div>
</div>
<div class="circle-wrapper">
<div class="label">Label 3</div>
<div class="circle"></div>
<div class="line"></div>
</div>
<div class="circle-wrapper">
<div class="label">Label 4</div>
<div class="circle"></div>
</div>
</div>
If you want to center it always above the circle, I would use the following: put the label inside the circle and use the following CSS properties:
.circle {
position: relative;
width: 34px;
height: 34px;
background-color: #B8C2CC;
border-radius: 100%;
margin: 50px 100px; /* remove this */
}
.circle .label {
position: absolute;
left: 50%;
bottom: 100%;
transform: translateX(-50%);
white-space: nowrap;
}
<div class="circle">
<div class="label">Small One</div>
</div>
<div class="circle">
<div class="label">Very long label with long text</div>
</div>
The percentage values of left and bottom reference to the width of the parent element and the percentage value of transform: translate references to the element's size. This allows you to position it in the center of the parent with left: 50% and then moving it to the left again by the half of the width of the element itself.
I want to show an arrow over an image. This arrow should be centered every time.
How can I do it?
Here is my code in jsfiddle:
CSS:
.t1_img {
background-image:url('http://www.4freephotos.com/medium/batch/Branch-of-acacia-with-flowers777.jpg');
position: relative;
background-size: cover;
background-position: center center;
overflow: hidden;
border-radius: 10px 0 0 0;
height: 200px;
}
.t1_arrow {
position: absolute;
bottom: 0;
width: 60px;
border-left: 40px solid #cfcfcf;
border-right: 40px solid #cfcfcf;
border-top: 20px solid transparent;
}
.t1_content {
background-color: #cfcfcf;
height: 150px;
padding-top: 20px;
margin-bottom: 40px;
}
HTML:
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
</div>
</div>
You know the width of the arrow so if you put it left:50%; and margin-left:-30px; because its width is 60px it is centered everytime.
So add this
.t1_arrow {left:50%;margin-left:-30px;}
Your fiddle edited
You could use the following line:
left: calc((100% - 60px)/2);
Where 60 px refers to the width of the arrow. This method is not supported by all browsers, unfortunately. For safety, add the following three lines to the .t1_arrow class:
.t1-arrow {
left: 45%;
left: calc((100%-60px)/2);
left: -webkit-calc((100%-60px)/2);
}
Or you could use jquery to set the height after pageload:
$(function() {
$(".t1-arrow").each( function() {
var w = $(this).parent(0).width();
$(this).css('left',(w-60)/2 + 'px');
});
});
If you only want it centred horizontally, add the following to your Arrow's CSS;
left: 0; right: 0;
margin: auto;
Updated Fiddle. https://jsfiddle.net/86e0gg99/12/
Here you can see a picture of the solution, i'm looking for.
https://db.tt/1UFk3baW
I have this kind of structure....
<div class="container-fluid">
<div class="section_3 row">
<div class="image_info_carousel_left col-xs-12 col-sm-12 col-md-6 col-lg-6">
<h1>Stay organized with your personal moving dashboard</h1>
<div class="author">Get timely reminders and assign tasks to stay on top of your move</div>
</div>
<div class="info_image col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="css/img/realtor-fourth.png" />
</div>
</div>
</div>
with this type of css....
.image_info_carousel_left {
padding: 100px 50px !important;
color: #fff;
background-color: #3B4C60;
}
.info_image {
padding: 0;
}
The height of the image within the image_info class varies dynamically... so the height of the image_info_carousel_left should also change & and the <h1> and <div class="author"> should be vertically centered...
I have tried using display:table & display:table-cell, but it doesn't work as classes with col-lg- are having float:left...
how can I do this?
this is the formula for vertical align anything.
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
Just put those commands to div you want to vertically align, or create a mixin if you are using preprocessors
I created this example to see it working with floats:
http://codepen.io/riogrande/pen/NxGROP
You can use display:inline-block; and vertical-align:middle; and don't forget to remove extra spaces which occurred by display:inline-block;.
Jsfiddle
* {
box-sizing: border-box;
}
.container {
width: 100%;
background: red;
padding: 10px;
}
.box {
display: inline-block;
vertical-align: middle;
width: 50%;
}
.box1 {
background: blue;
}
.box2 {
background: blue;
}
img {
width: 100%;
display: block;
}
<div class="container">
<div class="box1 box">
<img src="http://placehold.it/350x150">
</div><!--
--><div class="box2 box">heading with the fixed height</div>
</div>
Is there a better way to absolutely position a bunch of boxes to the left and right like this? Perhaps using flexbox?
http://jsfiddle.net/frank_o/zpv4jbmx/
HTML:
<div class="box first">
<h1>Lipsum</h1>
</div>
<div class="box second">
<h1>Lipsum</h1>
</div>
...
CSS:
.box {
position: absolute;
background: blue;
color: white;
}
.box.first, .box.third, .box.fifth {
left: 20px;
}
.box.second, .box.fourth, .box.sixth {
right: 20px;
}
.box.first {
top: 20px;
}
.box.second {
top: 120px;
}
...
Since we are going for "better", you could use floating and CSS even/odd rules, like so:
HTML
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<!-- As many as you'd like... -->
CSS
.box {
background: blue;
color: white;
}
.box:nth-child(odd){
float: left;
clear: both;
}
.box:nth-child(even){
float: right;
clear: both;
}
The result is the same, but the implementation is much more scalable.
http://jsfiddle.net/9mcgvqLj/