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>
Related
I use Polo - Responsive Multi-Purpose HTML5 Template.
I can't center my object
I did try many solutions, and nothing work for me still on left side.
See screenshot
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
</div>
Add below CSS to center align the image
img {
margin-left: 50%;
transform: translateX(-50%);
}
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/600x400" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="images/mockup/1.jpg" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
This is not the only solution, this is a suggestion :)
You can just use class offset-md-4 combined with text-center and it should work.
Also think about mobile. I have added offset-2 and col-8 to make sure it looks good on small screen too.
img {
max-width: 100%;
margin: auto;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="hr-title hr-long center">
<abbr>Single image lightbox</abbr>
</div>
<div class="container">
<div class="row col-no-margin">
<div class="offset-2 col-8 offset-md-4 col-md-4 text-center">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /></div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
Instead of
<div class="col-md-4">
Do the following:
<div class="col-md-12 text-center">
.text-center is the bootstrap class which will center the image with respect to the column
.col-md-12 will imply there is only 1 column in the entire row
How can I get the x positioned vertical middle when displaying on small devices (< 600px width)?
<div class="row">
<div class="col-sm-12">
<section class="panel panel-default panel-slider"><div class="panel-heading">
<h1 class="panel-title" style="font-size:18px">
Test with long description in title panel bla bla<a class="align-middle more pull-right" href="https://example.com" title="" data-toggle="tooltip" data-placement="right" data-original-title="more" ><i>x</i></a>
</h1>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8" style="margin-bottom: 10px;">
...
</div>
</div>
Currently it is:
Should be:
https://jsfiddle.net/9dtu4en1/
Thanks in advance!
Kind regards
Alex
I'd use flexbox on that h1 for a more fluid resizing, and remove align-middle & pull-right (to avoid floating which would make it's parent not consider child's height) from a:
External Fiddle to resize
Snippet:
h1 {
display: flex;
justify-content: space-between;
align-items: center;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-12">
<section class="panel panel-default panel-slider">
<div class="panel-heading">
<h1 class="panel-title" style="font-size:18px">Test with long description in title panel bla bla
<a class="more" href="https://example.com" title="" data-toggle="tooltip" data-placement="right" data-original-title="more"><i>x</i></a>
</h1>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8" style="margin-bottom: 10px;">
...
</div>
</div>
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!
here's my markup:
<style>
a.item
{
border:1px solid #aaa;
background:#ddd;
padding:10px;
display:block;
}
span.price
{
display:block;
text-align:center;
background:#555;
color:white;
}
</style>
<div class="main">
<div class="row">
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
</div>
</div>
it looks fine - like this:
the problem however is - when decreasing the browser window's width, it will destroy the layout and will look like this:
"image" and price are not side-bye-side anymore .. any ideas what's wrong with my code?
thanks
Include col-xs-6 next to col-md-6.
https://jsfiddle.net/gqmarfkh/ jsFiddle - I changed 2 of them as an example.
If you change .col-md-6 to col-xs-6 it should solve your problem. The class col-md-6 has no value untill the screen size is medium and up. Class col-xs-* will have a value from x-small and up. Check out this link: http://getbootstrap.com/css/#grid-options
Would you help me please make appear pictures in one column? It needs to be full width with no space between those images.
Thanks in advance.
What I want it to look like
What I have
Code:
img,
.image {
display: block;
height: 350px;
margin: 0;
width: 50%;
}
<section class="main">
<div class="container">
<div class="full-width">
<div class="vibe_editor clearfix">
<div class="v_module v_column col-md-12 fullwidth v_first">
<style>
<div class="v_module v_text_block about_us">
<p>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0">
<img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0">
</a>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0">
</p>
</div>
</div>
<div class="v_module v_column col-md-12 fullwidth v_first">
</div>
</div>
</div>
</section>
href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0"> <img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0"> </a> <a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0"> </p> </div> </div> <div class="v_module v_column col-md-12 fullwidth v_first"> </div> </div> </div> </section>
The p tag has padding by default remove it?
Also remove unwanted <style> tag