How could I make an vertical align of '10:00" and the gliphs on right side of thewe markup, into parent div?
An optional horizontal align as well will be appreciated.
https://jsfiddle.net/DTcHh/39516/
//markup
<div class="container" style="outline: 1px solid orange;">
<div class="col-sm-10 bg-danger">
<div class="col-sm-2 col-md-2 col-lg-2 bg-info">
10:00
</div>
<div class="col-sm-10 col-md-10 col-lg-10">
<div class="row">
<div class="col-sm-12">
Clique aqui para agendar
</div>
<div class="col-sm-12">
Consulta
</div>
<div class="col-sm-12">
Parando
</div>
</div>
</div>
</div>
<div class="col-sm-2 " >
<div><i class="pull-right glyphicon" class="glyphicon-chevron-down"></i>
<i class="fa fa-lg fa-lock pull-right"></i>
<i class="fa fa-lg fa-user pull-right"></i>
</div>
</div>
//css
import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
body {
margin: 10px;
}
Add this to your styles:
.container,
.container > .col-sm-10 {
display: flex;
align-items: center;
}
Updated Fiddle
Related
I wrote the media queries for smaller screens ,but i can not seem to make them work for ipads. I have a problem with the width of the header and the navbar. They don't seem to take up the full width even though I wrote margin and padding 0 (as an asterisk). The max-width of the html is 1600px. Here is a Print screen.
<header>
<div class="Header-TopContainer">
<div class="Header-MyAccountItem">
<i class="fas fa-user account "></i>
</div>
<div class="Header-MyAccount">
My Account
</div>
<div class="Header-CartItem">
<i class="fas fa-cart-plus cart"></i>
</div>
<div class="Header-Cart">
Cart
</div>
<div class="Header_CheckoutItem">
<i class="fas fa-check-circle check"></i>
</div>
<div class="Header-Checkout">
Checkout
</div>
<div class="Header-VerticalLine"><img src="./Images/first%20hr.png" alt="vertical line"></div>
<div class="Header-Search"><i class="fas fa-search" id="search"></i></div>
</div>
<div class="line mqtablet">
<img src="./Images/long.png" alt="vertical line">
</div>
<div class="Header-LogoContainer mqtablet">
<div class="Header-LogoText">
<h1>Car<span style="color:#ff3448">Store</span></h1>
<p class="Header-LogoSubText">Best Car Seller</p>
</div>
<div class="Header-Phone">
<div class="Header-PhoneIcon">
<i class="fas fa-mobile-alt mobile"></i>
<h2>+123 456 7890</h2>
</div>
<div class="Header-PhoneNumber">
<p class="Header-WorkingHours">mon-fri:8:30am-7:30pm; sat-sun:9:30am-4:30pm</p>
</div>
</div>
<div class="Header-container">
<div class="Header-Wishlist">
<div class="Header-WishlistVLine vline">
<img src="./Images/first%20hr.png" alt="vertical line">
</div>
<div class="Wishlist">
<div class="Header-WishlistIcon">
<i class="fas fa-star wishlisticon"></i>
</div>
<div class="Header-WishlistText">
Wishlist
</div>
</div>
</div>
<div class="Header-Compare">
<div class="Header-WishlistVLine">
<img src="./Images/first%20hr.png" alt="vertical line">
</div>
<div class="Compare">
<div class="Header-CompareIcon">
<i class="fas fa-car compareicon"></i>
</div>
<div class="Header-CompareText">
Compare
</div>
</div>
</div>
<div class="Header-MyCart">
<div class="Header-WishlistVLine">
<img src="./Images/first%20hr.png" alt="vertical line">
</div>
<div class="Mycart">
<div class="Header-MyCartIcon">
<i class="fas fa-cart-plus cart mycarticon"></i>
</div>
<div class="Header-MyCartText'">
My cart
</div>
</div>
</div>
</div>
</div>
</header>
<nav class="toggle-menu">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<ul class="MainMenu">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Reviews</li>
<li>Locations</li>
<li>Contacts</li>
</ul>
</nav>
#media(min-width:768px) and (max-width:1024px) {
header {
position: relative;
height: 17rem;
text-align: center;
}
.Header-TopContainer,
.Header-Phone {
display: none;
}
.mqtablet {
display: flex;
flex-direction: column;
text-align: center;
}
.Header-LogoText {
margin: 0.5rem;
}
.line {
position: absolute;
top: 9rem;
}
.Header-container {
margin-left: 10%;
}
.vline {
display: none;
}
nav {
text-align: center;
}
ul {
flex-wrap: nowrap;
justify-content: flex-end;
padding-right: 9rem;
}
ul li a {
padding-left: 5rem;
}
I'm generating cards in my *ngFor div.
It is generating them vertically (down), but I want angular to generate them horizontally (right).
My idea was to put the class col-6, but that doesn't work, it just puts half of the card under each other.
This is the code:
<div class="card-body">
<div class="card" *ngFor="let BLA of PACKAGE.blas; let index=index" class="p-1">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<div class="form-group row">
<div class="col-12">
{{bla.somethingone}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingtwo}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingthree}}
</div>
</div>
</div>
</div>
</div>
This is what I have:
And I want this:
I tried adding col-6 to the classes but it doesn't respond.
How can I achieve this effect ?
That has nothing to do with Angular, use a display: flex on the card-body and set flex-wrap: wrap; and flex-direction: row;:
.card-data {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.card {
width: 40%;
height: 100px;
line-height: 100px;
background-color: grey;
margin: 10px;
color: white;
text-align: center;
vertical-align: middle;
}
<div class="card-data">
<div class="card">
card 1
</div>
<div class="card">
card 2
</div>
<div class="card">
card 3
</div>
</div>
Change parent div class to row and add class col-6 to card row where your loop running
<div class="row">
<div class="card col-6 p-1" *ngFor="let BLA of PACKAGE.blas; let index=index">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<div class="form-group row">
<div class="col-12">
{{bla.somethingone}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingtwo}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingthree}}
</div>
</div>
</div>
</div>
</div>
You also have extra card div under loop, remove that for clean design.
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>
I have a code : http://www.bootply.com/8uA4jyGZKB
I would like to vertically center the text and icons at the right of the picture.
How can I vertically center the contents of the col-md-10 div ?
You can use CSS Flexbox.
Make the .row a flex container and use align-items property to vertically center the content. Just like:
.row {
display: flex;
align-items: center;
}
Have a look at the snippet below (use full screen for preview):
body {
padding-top: 50px;
}
.row {
display: flex;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<img id="cover" src="http://cdn-images.deezer.com/images/cover/e19f5a2ec7877377a58b9d1ba22f55e1/120x120-000000-80-0-0.jpg" class="">
</div>
<div class="col-md-10">
<div class="col-md-4">
<div class="row">
<div class="col-md-12" contenteditable="false">Justin Bieber</div>
</div>
<div class="row">
<div class="col-md-12">Baby</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-2"><span class="glyphicon glyphicon-fast-backward"></span>
</div>
<div class="col-md-2"><span class="glyphicon glyphicon-play"></span>
</div>
<div class="col-md-2"><span class="glyphicon glyphicon-fast-forward"></span>
</div>
<div class="col-md-2"><span class="glyphicon glyphicon-volume-up"></span>
</div>
<div class="col-md-2"><span class="glyphicon glyphicon-random"></span>
</div>
<div class="col-md-2"><span class="glyphicon glyphicon-volume-off"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
Hope this helps!
I have a bootstrap panel where the height is automatically generated from a jquery script.
So, I would like to have the footer with a background for the entire section.
How can I achieve this goal ?
I don't want to fix the height for this section, is it possible to make something like :"height for the rest of your space in the panel".
Here the fiddle:
http://www.bootply.com/XBCffrO0My
Table layout approach
Idea is to have the element behave like a table and the child item as its row which would occupy the entire space.
Updated Bootply
#crud1 {
display: table;
width: 100%;
}
.panel-footer {
display: table-row;
height: 100%;
}
.panel-footer .row {
display: table-cell;
padding-top: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4">
<div id="crud1" class="panel panel-primary" style="height: 248px;">
<div class="panel-heading clearfix">
<div class="pull-left">
ChartLine 1
</div>
<div class="pull-right">
<span class="label label-success">priusa2</span>
</div>
<div class="pull-right" style="padding-right: 7px;">
<span class="label label-success status"></span>
</div>
<p></p>
</div>
<!-- panel-heading closed -->
<div class="panel-body">
<div class="container-fluidrm">
No-picture
</div>
</div>
<!-- panel-body closed -->
<div class="panel-footer">
<div class="row" style="height: 100%;">
<div class="col-md-9">
<p>Description:</p>
</div>
<div class="col-md-1">
<a class="show-popup" href="#" id="poplink" data-showpopup="ChartLine 1"><span id="logos" class="material-icons"></span></a>
</div>
<div class="col-md-1" style="margin-left:7px;">
<span id="logos" class="glyphicon glyphicon-star"></span>
</div>
</div>
</div>
<!-- panel-footer closed -->
</div>
</div>
Flexible box approach
Give the child item flex: 1 to expand with the parent element.
Updated Bootply
#crud1 {
display: flex; /* Activate flexbox module layout */
flex-direction: column; /* Align items horizontally */
}
.panel-footer {
flex: 1; /* Expand with the parent */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4">
<div id="crud1" class="panel panel-primary" style="height: 248px;">
<div class="panel-heading clearfix">
<div class="pull-left">
ChartLine 1
</div>
<div class="pull-right">
<span class="label label-success">priusa2</span>
</div>
<div class="pull-right" style="padding-right: 7px;">
<span class="label label-success status"></span>
</div>
<p></p>
</div>
<!-- panel-heading closed -->
<div class="panel-body">
<div class="container-fluidrm">
No-picture
</div>
</div>
<!-- panel-body closed -->
<div class="panel-footer">
<div class="row" style="height: 100%;">
<div class="col-md-9">
<p>Description:</p>
</div>
<div class="col-md-1">
<a class="show-popup" href="#" id="poplink" data-showpopup="ChartLine 1"><span id="logos" class="material-icons"></span></a>
</div>
<div class="col-md-1" style="margin-left:7px;">
<span id="logos" class="glyphicon glyphicon-star"></span>
</div>
</div>
</div>
<!-- panel-footer closed -->
</div>
</div>