I am trying to import a background image for my jumbotron. Here is my code.
jsfiddle
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>City of Larissa</h1>
<p style="padding:40px;"></p>
<p>More than 8000 years of history</p>
</div>
<div class="col-xs-12 col-sm-2">
<p style="padding:40px;"></p>
<img src="img/logo.png" class="img-responsive">
</div>
</div>
</div>
</header>
and
.jumbotron {
margin: 0px auto;
padding: 70px 30px;
background: url('img/alcazar1.png');
color: floralwhite;
}
However, when I import that image through css,it can not be shown. Any ideas?
Thanks,
Theo.
may be You need to check the ImagePath for the Jumbotron Class in CSS.
Related
I have a problem with position sticky that does not work on Safari Mojave (updated version) for my navbar.
Vendor prefix Ok.
No overflow parent(body).
Bootstrap 4.
I tried many issues without success. Thanks a lot for your help !
<div id="navbar" class="header-gs-nav z-depth-1 d-none d-xl-block">
<div class="container-full">
<div class="header-inner">
<div class="row m-0">
<div class="col-2 title-logo-wrapper"></div>
<div class="col-8 main-wrapper"></div>
<div class="col-2 etrade-wrapper"></div>
</div>
</div>
</div>
</div>
.header-gs-nav{
background: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
z-index: 1070;}
I'm trying to bottom align an img in a jumbotron, but cannot figure it out.
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-lg-8">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
<div class="col-lg-4 text-center">
<img src="http://via.placeholder.com/200x200">
</div>
</div>
</div>
</div>
I tried adding the following to the CSS
.vertical-bottom {
display: flex;
align-items: bottom;
}
And then added the additional class to the DIV containing the img
<div class="col-lg-4 text-center vertical-bottom">
This didn't work, why is it so hard to vertically align things in bootstrap?
Here a kind of code:
Bootply
Css:
The media query is set to 1200 because I see you're using col-lg-xx
#media screen and (min-width:1200px) {
.flex_container img{
object-fit: contain;
object-position: 100% 100%;
}
.flex_container {
display: flex;
}
}
Html:
<div class="jumbotron">
<div class="container">
<div class="row flex_container">
<div class="col-lg-8">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
<div class="col-lg-4 text-center flex_container">
<img src="http://via.placeholder.com/200x200" style="">
</div>
</div>
</div>
</div>
I have a grid with 11 columns
<div class="row">
<div class="col-lg-1">1</div>
<div class="col-lg-1">2</div>
<div class="col-lg-1">3</div>
<div class="col-lg-1">4</div>
<div class="col-lg-1">5</div>
<div class="col-lg-1">6</div>
<div class="col-lg-1">7</div>
<div class="col-lg-1">8</div>
<div class="col-lg-1">9</div>
<div class="col-lg-1">10</div>
<div class="col-lg-1">11</div>
</div>
My problem is that bootstrap works on 12 column grids, therefore the 12th column shows empty. (making the grid look non centered)
I want to center this grid so at the beginning of the grid there will be the space of half a column, and at the end of the grid it will show the other half:
<div class="row">
<div class="col-lg-1/2">1/2 blank</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">2</div>
<div class="col-lg-1">3</div>
<div class="col-lg-1">4</div>
<div class="col-lg-1">5</div>
<div class="col-lg-1">6</div>
<div class="col-lg-1">7</div>
<div class="col-lg-1">8</div>
<div class="col-lg-1">9</div>
<div class="col-lg-1">10</div>
<div class="col-lg-1">11</div>
<div class="col-lg-1/2">1/2 blank</div>
</div>
^ thats an example of how I imagine it will work, but unfortunately we dont have 1/2 columns on boostrap.
You could always create a half-size column to add into a supplemental style sheet (You'll want to make sure you account for all of the styling, though):
.col-lg-half {
width: 4.166666665%;
}
.col-lg-half
{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
#media (min-width: 1200px) {
.col-lg-half {
float: left;
}
}
Then, what you are wanting should work.
<div class="row">
<div class="col-lg-half">1/2 blank</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">2</div>
<div class="col-lg-1">3</div>
<div class="col-lg-1">4</div>
<div class="col-lg-1">5</div>
<div class="col-lg-1">6</div>
<div class="col-lg-1">7</div>
<div class="col-lg-1">8</div>
<div class="col-lg-1">9</div>
<div class="col-lg-1">10</div>
<div class="col-lg-1">11</div>
<div class="col-lg-half">1/2 blank</div>
</div>
I've got my stacked progress bars looking nice, with percentage labels on each, but I'm not sure how to solve when a percentage causes the bar to be too small for the label.
Setting a min-width works for non-stacked progress bars, but breaks stacked ones.
How can I fix this without hacking up bootstrap too much?
Example fiddle: http://jsfiddle.net/nimh/kx7hvxyz/
<div class="container-fluid">
<div class="row-fluid">
<div class="panel panel-default max-width">
<div class="panel-body">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 89.74%">
<div class="text-left">+89.74%</div>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10.26%">
<div class="text-right">-10.26%</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 10.26%">
<div class="text-left">+10.26%</div>
</div>
<div class="progress-bar progress-bar-danger" style="width: 89.74%">
<div class="text-right">-89.74%</div>
</div>
</div>
</div>
</div>
</div>
Had a night to think about it and realized i can add a max-width percentage, as well as a min-width percentage, to keep stacked progress bars at least wide enough to show a label on both.
.progress-bar {
min-width: 15%;
max-width: 85%;
}
http://jsfiddle.net/nimh/kx7hvxyz/8/
It's not perfect (may look funny with a 99% and 1%), but will work for showing a label at all times for our needs.
How about playing with the line-height and font-size?
[1]: http://www.bootply.com/Tq7YbaeOX5
/* CSS used here will be applied after bootstrap.css */
.max-width {
max-width: 25em;
}
/* .progress-bar {
min-width: 4em;
} */
.progress-bar {
padding: 4px;
line-height: 12px;
}
.text-Left {
font-size: 12px;
float: left;
}
.text-left, .text-right {
font-size: 7px;
padding-right:5px;
}
.text_Right {
float: right;
}
<div class="container-fluid">
<div class="row-fluid">
<div class="panel panel-default max-width">
<div class="panel-body">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 89.74%">
<div class="text-Left">+89.74%</div>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10.26%">
<div class="text-right">-10.26%</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 10.26%">
<div class="text-left">+10.26%</div>
</div>
<div class="progress-bar progress-bar-danger" style="width: 89.74%">
<div class="text_Right">-89.74%</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to achieve full background width, using skeleton framework. For now, bad luck.
Here's how it looks now : http://shrani.si/f/3A/Uy/28somHnh/capture.png
Thanks everyone for helping me.
<div class="container">
<div id="portfolio-color">
<div class="sixteen columns">
<div id="color">
<div class="five columns offset-by-four">LATEST WORK
</div>
</div>
</div>
</div>
</div>
You can do so by putting .container onto a full width wrapping element. Something like this:
See dabblet here http://dabblet.com/gist/6476534
<style>
#import url(import.skeleton.before.css)
.wrapper {width: 100%;}
.color-one {background-color: red;}
.color-two {background-color: green;}
</stlye>
<div class="wrapper color-one">
<div class="container">
<div class="sixteen columns"></div>
</div>
</div>
<div class="wrapper color-two">
<div class="container">
<div class="five columns offset-by-four"></div>
<div class="eleven columns"></div>
</div>
</div>