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!
Related
I have a simple footer with contact information that contains of three rows. The first two appear at the top, the last one should be placed on the very bottom of the container.
So what I did was using an absolute positioning:
footer .verybottom {
position: absolute;
bottom: 0px;
background-color: grey;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="kontakt">
<div class="container">
<div class="row">
<div class="col md-12">
<h2>Contact</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
Adress
</div>
<div class="col-md-6">
something else
</div>
</div>
<div class="row verybottom">
<div class="col-md-6">
some more Text
</div>
<div class="col-md-6">
some more Text
</div>
</div>
</div>
</footer>
The positioning works fine, but whatever I do - the last row is only a wide as the col above it. can someone help me align the content with the rows above?
You need to put a container inside to get it to work... and then introduce another .row since we want the col-md-XX classes to work
working snippet:
footer .verybottom {
position: absolute;
bottom: 0px;
background-color: grey;
padding-left: -15px;
}
.row {
border: 1px dotted red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<footer id="kontakt">
<div class="container">
<div class="row">
<div class="col md-12">
<h2>Contact</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
Adress
</div>
<div class="col-md-6">
something else
</div>
</div>
<div class="row">
<div class="container verybottom">
<div class="row">
<div class="col-md-6">
some more Text
</div>
<div class="col-md-6">
some more Text
</div>
</div>
</div>
</div>
</div>
</footer>
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.
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
The code below displays 3 columns, each with an image and text that resize down on a smaller screen and finally to 1 column on a smartphone. There are 2 problems : 1/ on the smallest screen, the image is too big and 2/ the text is under the image (like on the big screen) but I want it on the side of the image (half size of the smallest screen).
I looked at many example, but I can not find something simple...
How can I achieve this easily with Bootstrap?
<div class="container BSC_Angel">
<div class="row">
<div class="col-md-12 text-center">
<div class="col-sm-4 text-center" style="">
<div>image 1</div>
<div>text 1</div>
</div>
<div class="col-sm-4 text-center" style="">
<div>image 2</div>
<div>text 2</div>
</div>
<div class="col-sm-4 text-center" style="">
<div>image 3</div>
<div>text 3</div>
</div>
</div>
</div>
</div>
You can use CSS Flexbox.
Have a look at this Codepen.
Or have a look at the snippet below (use full screen to view this properly):
.content-holder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20px 0;
}
/* On Mobiles (screen width <= 767px) */
#media screen and (max-width: 767px) {
.content-holder {
flex-direction: row;
}
.text-div {
margin-left: 10px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container BSC_Angel">
<div class="row">
<div class="col-md-12 text-center">
<div class="col-sm-4 text-center" style="">
<div class="content-holder">
<div class="img-div"><img src="http://placehold.it/100x100" alt=""></div>
<div class="text-div">Text 1</div>
</div>
</div>
<div class="col-sm-4 text-center" style="">
<div class="content-holder">
<div class="img-div"><img src="http://placehold.it/100x100" alt=""></div>
<div class="text-div">Text 2</div>
</div>
</div>
<div class="col-sm-4 text-center" style="">
<div class="content-holder">
<div class="img-div"><img src="http://placehold.it/100x100" alt=""></div>
<div class="text-div">Text 3</div>
</div>
</div>
</div>
</div>
</div>
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>