Im tried to create some UI for the my university project, But its not working correctly , anyone know how to do that correctly or any ideas (look my sample image) using bootstrap 4
I tried to design like this structure
This is my code
.icn-img {border-radius: 50%; display: block; width: 50px; height: 50px; background: white; border: 1px solid lightgray;}
.st-rgt-img{ display: block; width: 20px; height: 20px; background: lightgray}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="card">
<div class="card-body">
<!----------- details------------>
<div class="row">
<div class="col">
<div class="d-flex flex-row">
<div class=""><span class="icn-img"></span></div>
<div class="ml-2">No </div>
<div class=" ml-3 mt-1"> <span style="font-weight: bold;">Salon</span></div>
<div class=" ml-3"> have been created yet</div>
</div>
</div>
<div class="col">
<div class="api-lst">
<div class="card border-danger border-bottom" >
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2"> <h6 class="card-subtitle mb-2 text-muted">location</h6></div>
</div>
</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2"> <h6 class="card-subtitle mb-2 text-muted">34 salon</h6></div>
</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<div class="card-body text-success">
<h5 class="card-title">5</h5>
</div>
<div class="card-footer bg-success border-success">text</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-100"></div>
</div>
<!----------- details------------>
</div></div>
</div>
</div>
you can check the link
https://codepen.io/Xenio/pen/OqwxZa
.icn-img {
border-radius: 50%;
display: block;
width: 50px;
height: 50px;
background: white;
border: 1px solid lightgray;
}
.st-rgt-img {
display: block;
width: 20px;
height: 20px;
background: lightgray
}
.api-lst .card:hover{
transform: scale(1.04);
position:relative;
z-index:1;
transition: 0.5s;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="card">
<div class="card-body">
<!----------- details------------>
<div class="row">
<div class="col-sm-6">
<div class="">
<div class="d-flex align-items-center ">
<span class="icn-img"></span>
<div class="ml-2">No </div>
</div>
<div class=" ml-3 mt-1"> <span style="font-weight: bold;">Salon</span></div>
<div class=" ml-3"> have been created yet</div>
</div>
</div>
<div class="col-sm-6">
<div class="api-lst">
<div class="card data border-danger border-bottom">
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">location</h6>
</div>
</div>
</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">34 salon</h6>
</div>
</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<h5 class="">5</h5>
<div class="bg-success border-success">text</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border-danger border-bottom">
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">location</h6>
</div>
</div>
</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">34 salon</h6>
</div>
</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<h5 class="">5</h5>
<div class="bg-success border-success">text</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border-danger border-bottom">
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">location</h6>
</div>
</div>
</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">34 salon</h6>
</div>
</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<h5 class="">5</h5>
<div class="bg-success border-success">text</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-100"></div>
</div>
<!----------- details------------>
</div>
</div>
</div>
</div>
Related
I am showing my div in column. Issue is i need to center my text
MY code
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
<p class="grey font-small-2"></p>
</div>
<div class="row align-self-center">
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
ID: </a></span>
</div>
<div class="d-inline-block">
<span class="">
<span class="display-block overflow-hidden">
{{selectedPatient?.mrn}}</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Age:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span
class="display-block overflow-hidden"> {{selectedPatient?.age}}</span>
</span>
</div>
</div>
</li>
<li class="mb-2">
</ul>
</div>
</div>
</div>
</div>
</div>
Its look like this right now
I need to center the ID and AGE Text in center of my card. They are showing on left right now i need to show them in middle to the center. I try to give the text-align center but its not come in a center
.centered {
width: 100%;
display: flex;
justify-content: center;
}
place your items within that div containg that class.
Try this one. I removed some extra html code which making no sense.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/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.2/js/bootstrap.min.js"></script>
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
</div>
<div class="row align-self-center justify-content-center">
<div class="p-2 ">
<span class="text-primary font-weight-bold">ID:</span>
<span>{{selectedPatient?.mrn}}</span>
</div>
<div class="p-2 ">
<span class="text-primary font-weight-bold">Age:</span>
<span>{{selectedPatient?.age}}</span>
</div>
</div>
</div>
</div>
</div>
I'm trying to align the arrow to the center with respective to the circle
How can I change the arrow direction to down arrow when it's in mobile view, So that the order of the image will be like one below other pointed with downwards arrow.
Below is the code which I have tried
img {
width: 32px;
height: 32px
}
.icon-holder {
background-color: #2E51FF;
width: 75px;
height: 75px;
border-radius: 75px;
line-height: 75px;
}
<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.2/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.2/js/bootstrap.min.js"></script>
<div class="container-fluid p-4">
<div class="row text-center">
<div class="col">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 1</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder">100+</h2>
<p class=" text-muted font-weight-bold">Properties Listed</p>
</div>
<div class="col my-auto">
<h1 class="">></h1>
</div>
<div class="col ">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 2</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder">₱ 4.5 MN. </h2>
<p class=" text-muted font-weight-bold">Tokenized value of properties listed</p>
</div>
<div class="col my-auto">
<h1 class="">></h1>
</div>
<div class="col ">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 3</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder"> 7 MN. +</h2>
<p class=" text-muted font-weight-bold">Token Traded Volume</p>
</div>
<div class="col my-auto">
<h1 class="">></h1>
</div>
<div class="col">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 4</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder"> 10%</h2>
<p class=" text-muted font-weight-bold">Avg tokenization of properties listed</p>
</div>
</div>
</div>
I have restructured the div and added some bootstrap classes. Please adjust spacing accordingly. Hope it'll help you
img {
width: 32px;
height: 32px
}
.icon-holder {
background-color: #2E51FF;
width: 75px;
height: 75px;
border-radius: 75px;
line-height: 75px;
}
#media only screen and (max-width: 600px){
h1.arrow {
transform: rotate(90deg);
}
}
<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.2/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.2/js/bootstrap.min.js"></script>
<div class="container-fluid p-4">
<div class="row text-center">
<div class="col">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 1</h4>
<div class="d-flex align-items-center">
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<div>
<h1 class="arrow">></h1>
</div>
</div>
<h2 class="mb-0 pt-3 font-weight-bolder">100+</h2>
<p class=" text-muted font-weight-bold">Properties Listed</p>
</div>
<div class="col ">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 2</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder">₱ 4.5 MN. </h2>
<p class=" text-muted font-weight-bold">Tokenized value of properties listed</p>
</div>
<div class="col my-auto">
<h1 class="">></h1>
</div>
<div class="col ">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 3</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder"> 7 MN. +</h2>
<p class=" text-muted font-weight-bold">Token Traded Volume</p>
</div>
<div class="col my-auto">
<h1 class="">></h1>
</div>
<div class="col">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 4</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder"> 10%</h2>
<p class=" text-muted font-weight-bold">Avg tokenization of properties listed</p>
</div>
</div>
</div>
you can use media query for arrow to rotate
#media only screen and (max-width: 600px) {
.arrow-image {
transform: rotate(90deg)
}
}
to center it you can use
display: block;
margin: auto;
I'm struggling on how to level this card equally to each other:
As you can see in the picture below. The card for the top reason for downtime doesn't match what is on the other cards or vice-versa. I want them to on the same height with each other regardless of what is inside on them.
Below is my code:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Reason for downtime
</h5>
<div class="card-body">
<ul id="top5Downtime">
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Down Terminals:
</h5>
<div class="card-body">
<ol id="mostDown">
</ol>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Up Terminals:
</h5>
<div class="card-body">
<ol id="mostUp">
</ol>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="bar-chart">
</div>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="lineChart">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card shadow mb-3">
<h5 class="card-header">
Planned vs Unplanned Event
</h5>
<div class="card-body">
<div id="pieChart"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow mb-3">
<h5 class="card-header">
Downtime vs Uptime
</h5>
<div class="card-body">
<div id="pieChart2"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart2">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart3">
</div>
</div>
</div>
</div>
</div>
<!--END OF div.row-->
<!--END OF div.row-->
</div>
I've tried using the align-self-stretch but it only broke my design. How could I proceed?
Applying display: flex (or .d-flex class) to each of the .cols in same row will make them have equal height:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Reason for downtime
</h5>
<div class="card-body">
<ul id="top5Downtime">
</ul>
</div>
</div>
</div>
<div class="col-md-5 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Down Terminals:
</h5>
<div class="card-body">
<ol id="mostDown">
</ol>
</div>
</div>
</div>
<div class="col-md-4 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Up Terminals:
</h5>
<div class="card-body">
<ol id="mostUp">
</ol>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="bar-chart">
</div>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="lineChart">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 d-flex">
<div class="card shadow mb-3 w-100">
<h5 class="card-header">
Planned vs Unplanned Event
</h5>
<div class="card-body">
<div id="pieChart"></div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="card shadow mb-3 w-100">
<h5 class="card-header">
Downtime vs Uptime
</h5>
<div class="card-body">
<div id="pieChart2"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart2">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart3">
</div>
</div>
</div>
</div>
</div>
<!--END OF div.row-->
<!--END OF div.row-->
</div>
You also have to apply .w-100 to cards inside .d-flex cols, to make them stretch to full column width on smaller responsiveness intervals.
Important note: this solution relies on the fact you only have 1 card in each .col. If you have more than one, you'll need to add .flex-column to your .col as well.
But, for your example, .d-flex to .cols is enough.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="card bg-light col-sm-3">
<div class="row">
<div class="card-header col-6 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border">
<h5 class="card-title">1234567899</h5>
</div>
<div class="card-body col-12 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="card-header col-6 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border">
<h5 class="card-title">1234567899</h5>
</div>
<div class="card-body col-12 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="card-header col-6 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border">
<h5 class="card-title">1234567899</h5>
</div>
<div class="card-body col-12 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="card-header col-6 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border">
<h5 class="card-title">1234567899</h5>
</div>
<div class="card-body col-12 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
</div>
There's a lot of empty space in card. I need it as:
You can do that by adding class="p-0 my-auto" to remove padding and to center vertical. Below is the working snippet for the same
.card-body {
display: flex;
align-items: center;
justify-content: center;
}
.card-body.col-6 {
background: red
}
#media(min-width:768px) {
.card-title {
font-size: 3vw;
text-align: center;
word-break: break-all;
}
.img-container {
height: 63px;
width: 100%;
object-fit: cover;
}
}
#media(max-width:767px) {
.card-title {
font-size: 8.5vw;
text-align: center;
word-break: break-all;
}
.img-container {
height: 80px;
width: 100%;
object-fit: cover;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-container" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-container" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-container" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
</div>
Solution-2: Answered as per the question in the comment.Giving fixed height to col. Below is the solution for the same
.card-body {
display: flex;
align-items: center;
justify-content: center;
}
.card-body.col-6 {
background: red
}
#media(min-width:768px) {
.card-title {
font-size: 3vw;
text-align: center;
word-break: break-all;
}
}
#media(max-width:767px) {
.card-title {
font-size: 8.5vw;
text-align: center;
word-break: break-all;
}
}
.col-6 {
height:65px;
}
.img-fluid {
height:100%!important;
}
.card-header.col-6{
background: black
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0 text-center">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0 text-center">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0 text-center">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.card-title {
margin-bottom: 0;
}
</style>
<div class="row">
<div class="card bg-light col-sm-3">
<div class="row">
<div class="col-4 p-0 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col p-0 border text-center">
<h5 class="card-title">1234567899</h5>
</div>
<div class=" col-12 p-0 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="col-4 p-0 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col p-0 border text-center">
<h5 class="card-title">1234567899</h5>
</div>
<div class=" col-12 p-0 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="col-4 p-0 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col p-0 border text-center">
<h5 class="card-title">1234567899</h5>
</div>
<div class=" col-12 p-0 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="col-4 p-0 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col p-0 border text-center">
<h5 class="card-title">1234567899</h5>
</div>
<div class=" col-12 p-0 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
</div>
<section class="test">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 mb-3 ">
<div class="card bg-light">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-5 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col-lg-7 border px-3 pt-2">
<h5 class="card-title">1234567899</h5>
</div>
</div>
</div>
<div class="card-footer">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-3 ">
<div class="card bg-light">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-5 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col-lg-7 border px-3 pt-2">
<h5 class="card-title">1234567899</h5>
</div>
</div>
</div>
<div class="card-footer">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-3">
<div class="card bg-light">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-5 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col-lg-7 border px-3 pt-2">
<h5 class="card-title">1234567899</h5>
</div>
</div>
</div>
<div class="card-footer">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-3 ">
<div class="card bg-light">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-5 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col-lg-7 border px-3 pt-2">
<h5 class="card-title">1234567899</h5>
</div>
</div>
</div>
<div class="card-footer">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
</div>
</div>
</section>
i am new to ARIA tags. Kindly excuse if i am stupid.
What i want is a custom drop down to be visible when i click the down arrow.
The problem is the popup comes write below the icon as shown in this pic.
CSS
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.bkcolor {
background-color: #009cf6;
width: 305px;
/*#008bdd*/
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div id="container">
<div class="row" style="background:#009DF8;" id="namebardiv">
<div class="col-xs-10 col-md-5">
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<div class="row" style="color: white;font-size: 11px;">
</div>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-3">
<i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
</div>
<div class="col-xs-7 col-md-7">
<div class="row vertical-align">
<div class="col-xs-7 col-md-7" style="color: white; font-size: 35px;display: inline-block;">
Benarsi Das
</div>
<div class="col-xs-1 col-md-1 dropdrown">
<div class="dropdown-toggle" style="color: white; font-size: 35px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</div>
<ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
something
</ul>
</div>
<div class="col-xs-4 col-md-4">
<span style="color: white;font-size: 23px;padding-top: 10px;"></span>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2">
</div>
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
<div class="col-xs-10 col-md-5 vertical-align">
<div class="row">
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
</div>
</body>
</html>
But I need it like this
I know I can achieve it with this code
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.bkcolor {
background-color: #009cf6;
width: 305px;
/*#008bdd*/
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div id="container">
<div class="row" style="background:#009DF8;" id="namebardiv">
<div class="col-xs-10 col-md-5">
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<div class="row" style="color: white;font-size: 11px;">
</div>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-3">
<i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
</div>
<div class="col-xs-7 col-md-7">
<div class="row dropdown" id="dropdownrow">
<div class="dropdown-toggle" style="color: white; font-size: 35px; width:210px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<div id="dropdownlabel" style="color: white; font-size: 35px;display: inline-block;width:180px;font-family:'Roboto-Regular',san-serif">
Benarsi Das
</div>
<span class="caret"></span>
</div>
<ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
something
</ul>
</div>
</div>
<div class="col-xs-2 col-md-2">
</div>
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
<div class="col-xs-10 col-md-5 vertical-align">
<div class="row">
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
</div>
</body>
</html>
But this makes the dropdown(popup) visible even the text is clicked. I want it only to be visible only when the dropdown icon is clicked.
Any help would be greatly appreciated.
In your stylesheet, add the declaration
transform: translate(-60px, 26px);
to the style rules for .bkcolor.
N.B. You can alter the x-translate (-60px) and the y-translate (26px) to achieve the exact positioning that you want.
Working Example:
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.bkcolor {
background-color: #009cf6;
width: 305px;
/*#008bdd*/
transform: translate(-60px, 26px);
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div id="container">
<div class="row" style="background:#009DF8;" id="namebardiv">
<div class="col-xs-10 col-md-5">
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<div class="row" style="color: white;font-size: 11px;">
</div>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-3">
<i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
</div>
<div class="col-xs-7 col-md-7">
<div class="row vertical-align">
<div class="col-xs-7 col-md-7" style="color: white; font-size: 35px;display: inline-block;">
Benarsi Das
</div>
<div class="col-xs-1 col-md-1 dropdrown">
<div class="dropdown-toggle" style="color: white; font-size: 35px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</div>
<ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
something
</ul>
</div>
<div class="col-xs-4 col-md-4">
<span style="color: white;font-size: 23px;padding-top: 10px;"></span>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2">
</div>
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
<div class="col-xs-10 col-md-5 vertical-align">
<div class="row">
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
</div>
</body>
</html>