<div class="card-body" style="opacity:0.99;"> <!-- stacking context’s root element [![enter image description here][1]][1]-->
<h5 style="padding-left:60px;position:relative;z-index:10;" class="card-title"><!-- stacking order: 1 -->
<i style="position:absolute;font-size:60px;color:red;top:-10px;left:-10px;" class="fa fa-play-circle-o" aria-hidden="true"></i> Video Title
</h5>
<div class="card-details-1 clearfix" style="position:relative;z-index:20;"><!-- stacking order: 2 -->
<div>
<span class="card-date float-left">19.02.17</span>
<a class="card-username float-right" href="#">Username</a>
</div>
</div>
<div class="card-details-2 clearfix">
<div>
<span class="card-duration float-left">7:56 min</span>
<span class="card-votes float-right">20 Votes</span>
</div>
</div>
<a class="card-btn" href="#">View Video</a>
</div>
I have applied an opacity value less than 1 to the div.card-body in order to form a new stacking context.
h5 and div.card-details-1 are positioned and have a z-index value.
Why I can't get the black-colored effect shown in the picture?
Related
I'm trying to modify an existing component which inherits the Flexbox concept.
Currently it looks like this:
Now what I'm trying to achieve is regardless of content size inside the box:
The box will have the same height - aligned to each other
The button will stay at the bottom even if the top contents are long.
Here is the existing structure that I'm trying to fix:
<section class="container counsellor-list">
<div class="row">
<div class="col-12 col-sm-12 col-lg-6 col-xl-4 mb-30 counsellor-list-item">
<div class="state_chosen">
<img class="img-fluid" src="https://st.depositphotos.com/1771835/1477/i/950/depositphotos_14779771-stock-photo-portrait-of-confident-young-doctor.jpg" />
<div class="bg-blue20 p-30 counsellor-list-item-content">
<div class="text-coral subtitle-small text-bold text-uppercase mb-24 d-flex flex-wrap">
<span class="">
Wien
</span>
<span class="ml-16">
St. Polten
</span>
<span class="ml-auto language">
<span>
DE
<span> | </span>
EN
</span>
</span>
</div>
<h2 class="mb-24">Jan Faustio</h2>
<div class="">
<a class="btn btn-coral" href="#"> Button </a>
</div>
</div>
</div>
</div>
...
</section>
Codepen link
I tried a lot of stuff but didn't work as I'm expecting it to be/result.
Check this, I hope I understood what you want to achieve https://codepen.io/IvanBisultanov/pen/PoQmXqX
I also added .btn-wrap classname, and wrapped all HTML above in div
.counsellor-list-item-content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.btn-wrap {
margin-top: auto;
}
I have a carousel which is actually a form.
One carousel item is a multi selectbox
How can i auto increase the height on only one carousel-item as the height of the multi select box increase.
The image 1 is how i get.
Image 2 how i want it.
Much thanks for much insights. I cannot refresh the carousel. It will unset my form inputs
<div class="row no-gutters" id="mob-carousel-row" [style.height.px]="mobileCarouselRowHeight">
<div class="col-1 col-sm-1">
<a href="#carouselExampleIndicators" role="button" data-slide="prev">
<i class="fa fa-angle-left mobile-form-nav" ></i>
</a>
</div>
<div class="col-10">
<div
#plMobileCarouselForm
id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel"
data-interval="false">
<div class="carousel-inner" role="listbox" id="mob-carousel">
<div class="carousel-item active">
<div class="form-group md-form mob inputbox">
<!-- first input box item -->
</div>
</div>
<div class="carousel-item active">
<div class="form-group md-form mob muti-select">
<!-- muti select box item need auto height -->
</div>
</div>
<div class="carousel-item active">
<div class="form-group md-form mob inputbox">
<!-- first input box item -->
</div>
</div>
</div>
</div>
</div>
<div class="col-1 col-sm-1">
<a href="#carouselExampleIndicators" role="button" data-slide="next">
<i class="fa fa-angle-right mobile-form-nav" ></i>
</a>
</div>
</div>
This is intended as a comment but I can't comment yet.
Since you haven't provided your CSS it's just guess work.
However, if you set the height to auto for the container that contains the input forms or select boxes, it will adjust itself as more options become available.
.carousel-item active {
height: auto;
}
Bootstrap 3 shopping cart contains product tree in left side and product images in right side:
<body>
<div class="container">
<section class="row">
<!-- Left column: product tree -->
<div class="col-lg-3 col-md-4 col-sm-5">
<div id="LeftPane" class="site-leftpane custom-collapse">
<button class="collapse-toggle visible-xs" type="button" data-toggle="collapse" data-parent="custom-collapse" data-target="#side-menu-collapse">
<span class="">Tootepuu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class='tree list-group collapse' id="side-menu-collapse">
<li>
Product tree item 1
</li>
<li>
Product tree item 2
</li>
...
</div>
</div>
</div>
<!-- right column: product images -->
<div class="col-lg-9 col-md-8 col-sm-7">
<div class="site-maincolumn">
...
If printed from Chrome in landscape mode, there are only two product image columns and empty space appears in left side.
How to remove empty space in left so that product images appear in this area ?
If printed using portrait orientation everything is OK: four product image columns appear and there is no empty space.
Update
according to pbenard comment I added hidden-print class to left column
<div class="col-lg-3 col-md-4 col-sm-5 hidden-print">
This only makes two image columns centered.
How to print more image columns in landscape mode ?
You can create a special class to make the column wider during the printing.
For example: http://glebkema.ru/tasks/so-38413455.html
#media print {
.col-print-12 {
width: 100% !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-5 hidden-print">
<img src="//placehold.it/450x450/c69/f9c/?text=Left" width="100%" alt="">
</div>
<div class="col-lg-9 col-md-8 col-sm-7 col-print-12">
<img src="//placehold.it/900x300/69c/9cf/?text=Right" width="100%" alt="">
</div>
</div>
</div>
I have an app that I'm building with Bootstrap 4. I need to center some icons underneath an image. I have a Bootply here. My code looks like this:
<div class="container">
<br>
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-3">
<img alt="Picture" src="http://cdn.bgr.com/2015/11/bill-gates.jpg" class="img-circle center-block" style="max-height:6.0rem;">
<br>
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-twitter"></i></li>
<li class="list-inline-item"><i class="fa fa-google-plus"></i></li>
<li class="list-inline-item"><i class="fa fa-linkedin"></i></li>
</ul>
</div>
<div class="col-md-9">
<div><strong>Bill Gates</strong></div>
<p>
Here is some information about Bill Gates.
</p>
</div>
</div>
</div>
</div>
</div>
My question is, how do I horizontally center the three icons underneath my image so that it looks like a centered toolbar?
On your UL tag, remove the inline-list class, it's enforcing a float.
Update: Using flexbox is an option, but a solution that supports legacy browsers would be preferred.
It should be an easy task, but now I am searching for hours for an solution without success. I would like to create an navigation where the middle span "Very long headline 1 2 2 3 4 ..." does not do a line break and grow vertically when the view port size is getting very small. Content that does not fit into the span header-title should be hidden.
For a better understanding I attached two graphics and a jsfiddle example.
Current:
Target:
jsfiddle:
https://jsfiddle.net/herbert_hinterberger/ofu8c8rn/3/
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-12 col-sm-9">
<div class="row" id="header"> <!--header-->
<div class="col-xs-12">
<span id="header-menu-trigger" class="pull-left hidden-md hidden-lg" data-toggle="offcanvas">
<i class="fa fa-bars fa-3x"></i>
</span>
<span>
<h3 id="header-title">Very long headline 1 2 3 4 5 6 7 8 9 10 </h3>
</span>
<span class="notification-container pull-right">
<h3 class="notification">8</h3>
</span>
</div>
</div> <!--/header-->
</div> <!--/offcanvase-->
</div> <!--/row-->
Try flex. Flex will ensure that the middle element stretches/shrinks to the available space. Also, remove pull-right on the notification-container div.
https://jsfiddle.net/5s3v55px/
Add this CSS
.my-flex{
display:flex;
}
.flex-1{
flex:1;
}
HTML Changes
<div class="col-xs-12 my-flex">
<span id="header-menu-trigger" class="pull-left hidden-md hidden-lg" data-toggle="offcanvas">
<i class="fa fa-bars fa-3x"></i>
</span>
<span class="flex-1">
<h3 id="header-title">Very long headline 1 2 3 4 5 6 7 8 9 10 </h3>
</span>
<span class="notification-container">
<h3 class="notification">8</h3>
</span>
</div>