.circle{
padding:20px !important;
}
h2{
margin:unset;
}
.circle-text {
display: block;
margin: auto;
height: 120px;
width: 120px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: #FF9800 ;
color: #fff;
font: 18px "josefin sans", arial;
line-height: 120px;
}
.a {
display: inline-block;
position: relative;
}
.a:before,
.a:after {
content: "";
position: absolute;
height: 60px;
border-bottom: 5px solid black;
top:0;
width: 293px;
}
.a:before {
right: 100%;
margin-right: 0px;
}
.a:after {
left: 100%;
margin-left:0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-section-align uk-margin-xlarge-top">
<div class="uk-container">
<div class="uk-text-center" uk-grid>
<div class="uk-width-1-3 circle">
<div class="circle-text ">
<i class="medium material-icons">Step 1</i>
</div>
<p class="center-align uk-margin-top">Choose Your Trip</p>
</div>
<div class="uk-width-1-3 ">
<div class="circle-text a">
<i class="medium material-icons">Step 2</i>
</div>
<p class="center-align uk-margin-top ">Request for reservation</p>
</div>
<div class="uk-width-1-3">
<div class="circle-text ">
<i class="medium material-icons">Step 3</i>
</div>
<p class="center-align uk-margin-top">Successfully</p>
</div>
</div>
</div>
</div>
I want to make responsive progress bar using pure css and uikit 3. This code i was written it works when it show in desktop mode . when i switching desktop mode to mobile mode , middle black line strike both circle. i just want to when it show in mobile mode also it only touch the circle.
please give some suggestion.
Try this
.circle{
padding:20px !important;
}
h2{
margin:unset;
}
.circle-text {
display: block;
margin: auto;
height: 120px;
width: 120px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: #FF9800 ;
color: #fff;
font: 18px "josefin sans", arial;
line-height: 120px;
}
.a {
display: inline-block;
position: relative;
}
/*
.a:before,
.a:after {
content: "";
position: absolute;
height: 60px;
border-bottom: 5px solid black;
top:0;
width: 293px;
}
.a:before {
right: 100%;
margin-right: 0px;
}
.a:after {
left: 100%;
margin-left:0px;
}
*/
.uk-process-step {
position: relative;
}
.uk-process-step:before {
top: 60px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 5px;
background-color: black;
}
.uk-process-step .uk-width-1-3 {
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-section-align uk-margin-xlarge-top">
<div class="uk-container">
<div class="uk-text-center uk-process-step" uk-grid>
<div class="uk-width-1-3 circle">
<div class="circle-text ">
<i class="medium material-icons">Step 1</i>
</div>
<p class="center-align uk-margin-top">Choose Your Trip</p>
</div>
<div class="uk-width-1-3 ">
<div class="circle-text a">
<i class="medium material-icons">Step 2</i>
</div>
<p class="center-align uk-margin-top ">Request for reservation</p>
</div>
<div class="uk-width-1-3">
<div class="circle-text ">
<i class="medium material-icons">Step 3</i>
</div>
<p class="center-align uk-margin-top">Successfully</p>
</div>
</div>
</div>
</div>
Use z-index for the pseudo elements (the black line).
Set it to -1 so that it will go beyond the circle.
Try this
.circle{
padding:20px !important;
}
h2{
margin:unset;
}
.circle-text {
display: block;
margin: auto;
height: 120px;
width: 120px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: #FF9800 ;
color: #fff;
font: 18px "josefin sans", arial;
line-height: 120px;
}
.a {
display: inline-block;
position: relative;
}
.a:before,
.a:after {
content: "";
position: absolute;
height: 60px;
border-bottom: 5px solid black;
top:0;
width: 293px;
}
.a:before {
right: 100%;
margin-right: 0px;
z-index: -1;
}
.a:after {
left: 100%;
margin-left:0px;
z-index:-1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-section-align uk-margin-xlarge-top">
<div class="uk-container">
<div class="uk-text-center" uk-grid>
<div class="uk-width-1-3 circle">
<div class="circle-text ">
<i class="medium material-icons">Step 1</i>
</div>
<p class="center-align uk-margin-top">Choose Your Trip</p>
</div>
<div class="uk-width-1-3 ">
<div class="circle-text a">
<i class="medium material-icons">Step 2</i>
</div>
<p class="center-align uk-margin-top ">Request for reservation</p>
</div>
<div class="uk-width-1-3">
<div class="circle-text ">
<i class="medium material-icons">Step 3</i>
</div>
<p class="center-align uk-margin-top">Successfully</p>
</div>
</div>
</div>
</div>
Related
I want to place these 3 buttons in a circle under the timer. Please see images for reference. I'm trying to put these 3 buttons inside the circle but it always crashes my layout. I have attached my code and css- please check it
.circle {
margin: 0 auto;
width: 350px;
height: 350px;
line-height: 320px;
border-radius: 50%;
text-align: center;
border: 10px solid #666;
border-style: double;
}
.circleContent {
display: inline-block;
color: #fff;
font-size: 40px;
width: 60px;
}
.circleContent-span {
color: #fff;
font-size: 40px;
}
<body>
<div class="container mt-5">
<div>
<h1 class="title">Stop Watch</h1>
</div>
<div class="circle mt-5">
<div>
<h1 id="hour" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="min" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="sec" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="msec" class="circleContent">00</h1>
</div>
</div>
<div>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<button onclick="reset()">Reset</button>
</div>
</div>
</body>
.circle {
margin: 0 auto;
width: 350px;
height: 350px;
line-height: 320px;
border-radius: 50%;
text-align: center;
border: 10px solid #666;
border-style: double;
}
.circleContent {
display: inline-block;
color: #fff;
font-size: 40px;
width: 60px;
}
.circleContent-span {
color: #fff;
font-size: 40px;
}
Buttons
[![enter image description here][1]][1]
Circle
[![enter image description here][2]][2]
[1]: https://i.stack.imgur.com/v5Qve.png
[2]: https://i.stack.imgur.com/VaIH2.png
Something like this will help
<div class="container mt-5 h-position-relative">
<div>
<h1 class="title">Stop Watch</h1>
</div>
<div class="circle mt-5">
<div>
<h1 id="hour" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="min" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="sec" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="msec" class="circleContent">00</h1>
</div>
</div>
<div class="h-position-absolute h-tl">
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<button onclick="reset()">Reset</button>
</div>
</div>
CSS:
.h-position-relative{
position:relative;
}
.h-position-absolute{
position:absolute;
}
.h-tl{
top:smth;
left:smth;
}
If you want something like this
Than this will help:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
.circle {
margin: 0 auto;
width: 350px;
height: 350px;
line-height: 320px;
border-radius: 50%;
text-align: center;
border: 10px solid #666;
border-style: double;
}
.circleContent {
display: inline-block;
color: #fff;
font-size: 40px;
width: 60px;
}
.circleContent-span {
color: #fff;
font-size: 40px;
}
.h-position-relative{
position:relative;
}
.h-position-absolute{
position:absolute;
}
.h-tl{
top:350px;
left:250px;
}
</style>
</head>
<body>
<div class="container mt-5 h-position-relative">
<div>
<h1 class="title">Stop Watch</h1>
</div>
<div class="circle mt-5">
<div>
<h1 id="hour" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="min" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="sec" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="msec" class="circleContent">00</h1>
</div>
</div>
<div class="h-position-absolute h-tl">
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<button onclick="reset()">Reset</button>
</div>
</div>
</body>
</html>
.booking{
background-color: #f8f8f8;
}
.circle-text {
display: block;
margin: auto;
height: 150px;
width: 150px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background:green ;
color: #fff;
font: 12px "josefin sans", arial;
line-height: 150px;
z-index: 1;
position: relative;
}
#media screen and (min-width: 320px) and (max-width:800px) {
.circle-text{
height:70px;
width:70px;
line-height:70px;
}
}
#media screen and (min-width:320px) and (max-width:800px){
.steps:not(:first-child)::before {
content: "";
top: 37px;
}
}
.step:nth-child(2) .circle-text {
background: grey;
}
.step:nth-child(3) .circle-text {
background: grey;
}
.a {
display: inline-block;
position: relative;
}
.uk-process-step {
position: relative;
}
.step:not(:first-child)::before {
content: "";
left: -50%;
position: absolute;
top: 77px;
width: 100%;
border-bottom: 5px solid grey;
}
.step.active ~ .step:before {
border-bottom: 5px dotted grey;
}
.uk-process-step .uk-width-1-3 {
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<section class=" booking">
<div class="uk-container uk-container-expand uk-padding-large">
<div class="uk-text-center uk-process-step" uk-grid>
<div class="uk-width-1-3 step circle">
<div class="circle-text ">
<i class="medium material-icons">Step 1</i>
</div>
<p class="center-align uk-margin-top">Choose Your Trip</p>
</div>
<div class="uk-width-1-3 step active">
<div class="circle-text a">
<i class="medium material-icons">Step 2</i>
</div>
<p class="center-align uk-margin-top ">Request for reservation</p>
</div>
<div class="uk-width-1-3 step ">
<div class="circle-text ">
<i class="medium material-icons">Step 3</i>
</div>
<p class="center-align uk-margin-top">Successfully</p>
</div>
</div>
</div>
</section>
enter code here
I want to make responsive progress bar using pure css and uikit 3. This code i was written it works when it show in desktop mode . when i switching desktop mode to mobile mode , line is not responsive .the line goes to down . But i want to these line middle of circle even in desktop mode as well and mobile mode.
Use media queries and define the breakpoints
Try this.
.booking{
background-color: #f8f8f8;
}
.circle-text {
display: block;
margin: auto;
height: 150px;
width: 150px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background:green ;
color: #fff;
font: 12px "josefin sans", arial;
line-height: 150px;
z-index: 1;
position: relative;
}
.step:nth-child(2) .circle-text {
background: grey;
}
.step:nth-child(3) .circle-text {
background: grey;
}
.a {
display: inline-block;
position: relative;
}
.uk-process-step {
position: relative;
}
.step:not(:first-child)::before {
content: "";
left: -50%;
position: absolute;
top: 77px;
width: 100%;
border-bottom: 5px solid grey;
}
.step.active ~ .step:before {
border-bottom: 5px dotted grey;
}
.uk-process-step .uk-width-1-3 {
position: relative;
}
#media screen and (max-width:767px)
{
.circle-text{
width:120px;
height:120px;
line-height: 120px;
}
.step:not(:first-child)::before{
top:60px;
}
}
#media screen and (max-width:480px)
{
.circle-text{
width:100px;
height:100px;
line-height: 100px;
}
.step:not(:first-child)::before{
top:50px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<section class=" booking">
<div class="uk-container uk-container-expand uk-padding-large">
<div class="uk-text-center uk-process-step" uk-grid>
<div class="uk-width-1-3 step circle">
<div class="circle-text ">
<i class="medium material-icons">Step 1</i>
</div>
<p class="center-align uk-margin-top">Choose Your Trip</p>
</div>
<div class="uk-width-1-3 step active">
<div class="circle-text a">
<i class="medium material-icons">Step 2</i>
</div>
<p class="center-align uk-margin-top ">Request for reservation</p>
</div>
<div class="uk-width-1-3 step ">
<div class="circle-text ">
<i class="medium material-icons">Step 3</i>
</div>
<p class="center-align uk-margin-top">Successfully</p>
</div>
</div>
</div>
</section>
Sample Image How to put Icon for image At the end with Css and HTMl5.
Please help me in this , Thanks in advance
Here I am getting outside of the image But I have to get at the right side corner with clickable
.container img {
max-width:5%;
max-height:5%
}
.positioner {
position: absolute;
}
.icon {
position: absolute;
right: -70px;
bottom: -20px;
width: 32px;
height: 32px;
border-radius: 20px;
border: 4px solid white;
background: rgb(0, 195, 255);
}
<div class="container" style="margin-bottom: 10px;">
<img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);"
class="mr-3 d-none d-sm-block" alt="..." i class="fa fa-pencil fa-lg" style="color:white">
<div class="positioner">
<div class="icon">
<i class="fa fa-pencil fa-lg" style="color:white"></i>
</div>
</div>
<div>
[Sample Image for your reference]
[1]: https://i.stack.imgur.com/cYzfh.png
<html>
<head>
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
</style>
</head>
<body>
<div class="container">
<img src="rose-817431_960_720.jpg" alt="Snow" style="width:100%;">
<img src="flat-blue-home-icon-4.png" class="bottom-right" id='icon'>
</div>
<script>
document.getElementById('icon').addEventListener('click',() => {
alert("CLICKED ON ICON");
});
</script>
</body>
check below code
.container {
margin-bottom: 10px;
}
.icon {
position: absolute;
bottom: 5px;
right: 0px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgb(0, 195, 255);
}
.profile-pic {
position: relative;
width: 56px;
float: left;
}
.profile-desc {
margin-left: 56px;
height: 60px;
/* padding: 10px; */
}
.profile-desc p {
margin: 0;
padding: 15px 10px 10px;
}
<div class="container" style="/* margin-bottom: 10px; */">
<div class="profile-pic">
<img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);" class="mr-3 d-none d-sm-block" alt="..." i="">
<div class="icon">
<i class="fa fa-pencil fa-lg" style="color:white"></i>
</div>
</div>
<div class="profile-desc">
<p>dsds</p>
</div>
<div>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: ""
}], "*")
}
</script>
</div></div>
I'm using Bootstrap 3.3.7 and Angular 5.2.0. I have a loop with the addition of a new entry. Entries are added to "cards". But the problem is that they are now added vertically. And how can I make it so that they are added all along the horizontally by about 5 "cards" in a row as a new record is added ie 6 was transferred to a new row.
html and all css on the cards: :
.card{
display: inline-block;
position: relative;
width: 100%;
margin: 25px 0;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
border-radius: $border-radius-base;
color: $mdb-card-body-text;
background: $mdb-card-body-background;
.card-height-indicator {
margin-top: 100%;
}
.title{
margin-top: 0;
margin-bottom: 5px;
}
.card-image {
height: 60%;
position: relative;
overflow: hidden;
margin-left: 15px;
margin-right: 15px;
margin-top: -30px;
border-radius: $border-radius-large;
img {
width: 100%;
height: 100%;
border-radius: $border-radius-large;
pointer-events: none;
}
.card-title {
position: absolute;
bottom: 15px;
left: 15px;
color: $mdb-card-image-headline;
font-size: $font-size-h4;
text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5);
}
}
.category:not([class*="text-"]){
color: $gray-color;
}
.card-content{
padding: 15px 20px;
.category{
margin-bottom: 0;
}
}
.card-header{
#include shadow-big();
margin: -20px $margin-base 0;
border-radius: $border-radius-base;
padding: $padding-base;
background-color: $gray-color;
.title{
color: $white-color;
}
.category{
margin-bottom: 0;
color: rgba($white-color, .62);
}
&.card-chart{
padding: 0;
min-height: 160px;
+ .content{
h4{
margin-top: 0;
}
}
}
.ct-label{
color: rgba($white-color, .7);
}
.ct-grid{
stroke: rgba(255, 255, 255, 0.2);
}
.ct-series-a .ct-point,
.ct-series-a .ct-line,
.ct-series-a .ct-bar,
.ct-series-a .ct-slice-donut{
stroke: rgba(255,255,255,.8);
}
.ct-series-a .ct-slice-pie,
.ct-series-a .ct-area{
fill: rgba(255,255,255,.4);
}
}
.chart-title{
position: absolute;;
top: 25px;
width: 100%;
text-align: center;
h3{
margin: 0;
color: $white-color;
}
h6{
margin: 0;
color: rgba(255,255,255, .4);
}
}
.card-footer{
margin: 0 20px 10px;
padding-top: 10px;
border-top: 1px solid #eeeeee;
.content{
display: block;
}
div{
display: inline-block;
}
.author{
color: $gray-color;
}
.stats{
line-height: 22px;
color: $gray-color;
font-size: $font-size-small;
.material-icons{
position: relative;
top: 4px;
font-size: $font-paragraph;
}
}
h6{
color: $gray-color;
}
}
img{
width: 100%;
height: auto;
}
.category{
.material-icons{
position: relative;
top: 6px;
line-height: 0;
}
}
.category-social{
.fa{
font-size: 24px;
position: relative;
margin-top: -4px;
top: 2px;
margin-right: 5px;
}
}
.author{
.avatar{
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 50%;
margin-right: 5px;
}
a{
color: $black-color;
text-decoration: none;
.ripple-container{
display: none;
}
}
}
.table{
margin-bottom: 0;
tr:first-child td{
border-top: none;
}
}
[data-background-color="purple"]{
background: linear-gradient(60deg, $purple-400, $purple-600);
#include shadow-big-color($brand-primary);
}
[data-background-color="blue"]{
background: linear-gradient(60deg, $blue-900, $blue-900);
#include shadow-big-color($brand-info);
}
[data-background-color="green"]{
background: linear-gradient(60deg, $green-400, $green-600);
#include shadow-big-color($brand-success);
}
[data-background-color="orange"]{
background: linear-gradient(60deg, $orange-400, $orange-600);
#include shadow-big-color($brand-warning);
}
[data-background-color="red"]{
background: linear-gradient(60deg, $red-400, $red-600);
#include shadow-big-color($brand-danger);
}
[data-background-color]{
color: $white-color;
a{
color: $white-color;
}
}
}
.card-stats{
.title{
margin: 0;
}
.card-header{
float: left;
text-align: center;
i{
font-size: 36px;
line-height: 56px;
width: 56px;
height: 56px;
}
}
.card-content{
text-align: right;
padding-top: 10px;
}
}
.card-nav-tabs{
.header-raised{
margin-top: -$margin-base * 2;
}
.nav-tabs{
background: transparent;
padding: 0;
}
.nav-tabs-title{
float: left;
padding: 10px 10px 10px 0;
line-height: 24px;
}
}
.card-plain{
background: transparent;
box-shadow: none;
.card-header{
margin-left: 0;
margin-right: 0;
}
.content{
padding-left: 5px;
padding-right: 5px;
}
.card-image{
margin: 0;
border-radius: $border-radius-base;
img{
border-radius: $border-radius-base;
}
}
}
.iframe-container{
margin: 0 -20px 0;
iframe{
width: 100%;
height: 500px;
border: 0;
#include shadow-big();
}
}
.card-profile,
.card-testimonial{
margin-top: 30px;
text-align: center;
.btn-just-icon.btn-raised{
margin-left: 6px;
margin-right: 6px;
}
.card-avatar{
max-width: 130px;
max-height: 130px;
margin: -50px auto 0;
border-radius: 50%;
overflow: hidden;
#include shadow-big();
& + .content{
margin-top: 15px;
}
}
&.card-plain{
.card-avatar{
margin-top: 0;
}
}
}
<div class="col-lg-3 col-md-6 col-sm-6">
<div *ngFor="let note of notes" >
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content" >
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save" ><i class="fa fa-eye"></i></button>
<button class="button-trash" ><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
</div>
Add the *ngFor on the following element
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content">
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save"><i class="fa fa-eye"></i></button>
<button class="button-trash"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content">
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save"><i class="fa fa-eye"></i></button>
<button class="button-trash"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content">
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save"><i class="fa fa-eye"></i></button>
<button class="button-trash"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content">
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save"><i class="fa fa-eye"></i></button>
<button class="button-trash"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content">
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save"><i class="fa fa-eye"></i></button>
<button class="button-trash"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
</div>
</div>
You need to modify the Bopotstrap grid structure to incorporate 5 columns in a row. Try using the following structure, you will be able to get what you want.
.col.col-2 {
flex: 0 0 20%;
max-width: 20%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col col-2">
1 columns
</div>
<div class="col col-2">
2 columns
</div>
<div class="col col-2">
3 columns
</div>
<div class="col col-2">
4 columns
</div>
<div class="col col-2">
5 columns
</div>
<div class="col col-2">
6 columns
</div>
</div>
</div>
I'm trying to code this design:
And this is the code I have:
.container-flex {
display: flex;
flex-flow: row;
height: 100px;
}
.left {
flex: 1;
background-color: #2C77A5;
padding-top: 2%;
border-top-left-radius: 6px;
height: 100px;
}
.main {
display: flex;
flex-direction: column;
}
.top {
background: #27698D;
border-bottom: 1px solid #2a2a2a;
border-top-right-radius: 6px;
width: 42px;
height: 50px;
padding-left: 14px;
padding-top: 14px;
}
.middle {
background: #27698D;
border-bottom-right-radius: 6px;
width: 42px;
height: 50px;
padding-left: 14px;
padding-top: 16px;
}
.row-celeste {
height: 22%;
background-color: #8CE8FC;
}
<div class="container-flex">
<div class="left">
<div class="row">
<div class="col-md-7 col-md-offset-1 border-right">
<p class="card-text white-text">Mejorar clima en finanzas</p>
<h4 class="card-subtitle white-text">Ponderación 33%</h4>
</div>
<div class="col-md-4 check-area">
<p class="card-text white-text" id="clicker-calificacion"><i class="fa fa-check text-white" aria-hidden="true"></i> Calificar</p>
</div>
</div>
<div class="row-celeste">
<p class="card-text centered"></p>
</div>
</div>
<section class="main">
<a href="">
<div id="clicker-menu-black" class="col top"><i class="fa fa-bars white-text" aria-hidden="true"></i>
</div>
</a>
<a href="">
<div id="clicker" class="col middle"><i class="fa fa-plus white-text" aria-hidden="true"></i>
</div>
</a>
</section>
</div>
How can I make the light blue row stick to the bottom of ".left" regardless of its height? I've tried positioning, but perhaps I don't really understand it.
You need to use absolute positioning, see the example below:
.container-flex {
display: flex;
flex-flow: row;
height: 100px;
}
.left {
flex: 1;
background-color: #2C77A5;
padding-top: 2%;
border-top-left-radius: 6px;
height: 100px;
position: relative; /* must be set to the container of the absolute positioned element */
}
.main {
display: flex;
flex-direction: column;
}
.top {
background: #27698D;
border-bottom: 1px solid #2a2a2a;
border-top-right-radius: 6px;
width: 42px;
height: 50px;
padding-left: 14px;
padding-top: 14px;
}
.middle {
background: #27698D;
border-bottom-right-radius: 6px;
width: 42px;
height: 50px;
padding-left: 14px;
padding-top: 16px;
}
.row-celeste {
height: 22px;
background-color: #8CE8FC;
position: absolute; /* this will make your div position calculated respecting its container */
bottom: -19px; /* this will stick it to the bottom */
width: 100%;
z-index: -1;
}
<div class="container-flex">
<div class="left">
<div class="row">
<div class="col-md-7 col-md-offset-1 border-right">
<p class="card-text white-text">Mejorar clima en finanzas</p>
<h4 class="card-subtitle white-text">Ponderación 33%</h4>
</div>
<div class="col-md-4 check-area">
<p class="card-text white-text" id="clicker-calificacion"><i class="fa fa-check text-white" aria-hidden="true"></i> Calificar</p>
</div>
</div>
<div class="row-celeste">
<p class="card-text centered"></p>
</div>
</div>
<section class="main">
<a href="">
<div id="clicker-menu-black" class="col top"><i class="fa fa-bars white-text" aria-hidden="true"></i>
</div>
</a>
<a href="">
<div id="clicker" class="col middle"><i class="fa fa-plus white-text" aria-hidden="true"></i>
</div>
</a>
</section>
</div>
The light blue row doesn't need to be a div. It can be just a blue border
#box {
display: inline-flex;
flex-direction: row;
border-radius: 6px;
overflow: hidden;
}
#left {
background-color: #0073a9;
border-bottom: 10px solid #6aebff; /* Light blue "bar" */
display: flex;
flex-direction: row;
}
#left > * {
padding: 10px 20px;
}
#left > *:not(:first-child) {
border-left: 1px solid black;
}
#right {
background-color: #00688f;
display: flex;
flex-direction: column;
font-size: 22px;
font-weight: bold;
}
#right > * {
flex-grow: 1;
flex-basis: 0;
padding: 5px 10px;
text-align: center;
}
#right > *:not(:first-child) {
border-top: 1px solid black;
}
.centered-container {
display: flex;
direction: row;
justify-content: center;
align-items: center;
}
#ellipsis {
line-height: 30%;
}
* {
color: white;
}
#left {
font-family: sans, "Raleway";
}
<div id="box">
<div id="left">
<div id="title-div" class="centered-container">
<div>
<p><b>Mejorar políticas de liderazgo</b><br>Ponderación 40%</p>
</div>
</div>
<div id="qualify-div" class="centered-container">
✔ Calificar
</div>
</div>
<div id="right">
<div id="ellipsis" class="centered-container">
<div>·<br>·<br>·</div>
</div>
<div class="centered-container">
<div>+</div>
</div>
</div>
</div>
Is this OK?
<style>
.container-flex {
display: flex;
flex-flow: row;
height: 100px;
}
.left {
flex: 1;
background-color: #2C77A5;
padding-top: 2%;
border-top-left-radius: 6px;
height: 100px;
}
.main {
display: flex;
flex-direction: column;
}
.top {
background: #27698D;
border-bottom: 1px solid #2a2a2a;
border-top-right-radius: 6px;
width: 42px;
height: 50px;
padding-left: 14px;
padding-top: 14px;
}
.middle {
background: #27698D;
border-bottom-right-radius: 6px;
width: 42px;
height: 50px;
padding-left: 14px;
padding-top: 16px;
}
.row-celeste {
height: 22%;
background-color: #8CE8FC;
}
.row-celeste {
height: 22%;
background-color: #8CE8FC;
bottom: 0;
position: absolute;
width: 100%;
}
</style>
<div class="container-flex">
<div class="left">
<div class="row">
<div class="col-md-7 col-md-offset-1 border-right">
<p class="card-text white-text">Mejorar clima en finanzas</p>
<h4 class="card-subtitle white-text">Ponderación 33%</h4>
</div>
<div class="col-md-4 check-area">
<p class="card-text white-text" id="clicker-calificacion"><i class="fa fa-check text-white" aria-hidden="true"></i> Calificar</p>
</div>
</div>
<div class="row-celeste">
<p class="card-text centered"></p>
</div>
</div>
<section class="main">
<a href="">
<div id="clicker-menu-black" class="col top"><i class="fa fa-bars white-text" aria-hidden="true"></i>
</div>
</a>
<a href="">
<div id="clicker" class="col middle"><i class="fa fa-plus white-text" aria-hidden="true"></i>
</div>
</a>
</section>
</div>