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;}
Related
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.
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>
Im trying to get a bootstrap column to span 2 rows. I have been been looking at How can I get a Bootstrap column to span multiple rows? and it doesnt seem to work in the context of my project.
Could someone tell me what I need to do in order to make the column on the right span 2 rows?
<div class="container" style="background-color: #fff">
<div class="row" style="background-color: #fff">
<div class="col-md-4">
<img src="public/img/index/Hola_Sevila.png" style="width:180px">
<h6>Hola Sevilla!</h6>
<p>I recently had the pleaseure and the privilege of travelling to the ...</p>
<p>Read More</p>
</div>
<div class="col-md-4">
<img src="public/img/index/Trans_helps_children.jpg" style="width:180px">
<h6>Translation helps children</h6>
<p>De La Salle Solidarieta Internatazionale ONLUS is a non-profit organisation that fundraises ...</p>
<p>Read More</p>
</div>
<div class="col-md-4 two_row_column">
<div class="index-b-right-1"></div>
<div class="index-b-right-1">
<h3>Videos</h3>
</div>
<div class="index-b-right-1">
<h3>Be a Friend</h3>
</div>
<div class="index-b-right-2">
<h4>You can show your appreciation and support future development by becoming a friend of the Rosetta</h4>
</div>
<div class="index-b-right-3">
<h3>Donate</h3>
</div>
<div class="index-b-right-1"></div>
</div>
</div>
CSS
.index-b-right-1 {
background-color: #000;
height: 40px;
border-bottom: 2px solid white;
color: #fff;
text-align: center;
padding-bottom: 10px;
}
.index-b-right-2 {
background-color: #000;
border-bottom: 2px solid white;
color: #fff;
text-align: center;
padding: 30px 40px 30px 40px;
}
.index-b-right-3 {
background-color: #000;
height: 40px;
border-bottom: 2px solid white;
text-align: center;
padding-bottom: 10px;
}
.index-b-right-3 a {
color: #CC9900;
}
I guess this is what you wanted to do?
Simple way i would explain it is you create the top most row, create the columns in the row, then in the other column, create another row which you then divide up into individual columns.
Hope it helps!
<div class="container" style="background-color: #fff">
<div class="row" style="background-color: #fff">
<div class="col-md-4">
<img src="public/img/index/Hola_Sevila.png" style="width:180px">
<h6>Hola Sevilla!</h6>
<p>I recently had the pleaseure and the privilege of travelling to the ...</p>
<p>Read More</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
<img src="public/img/index/Trans_helps_children.jpg" style="width:180px">
<h6>Translation helps children</h6>
<p>De La Salle Solidarieta Internatazionale ONLUS is a non-profit organisation that fundraises
...</p>
<p>Read More</p>
</div>
<div class="col-md-4 two_row_column">
<div class="index-b-right-1"></div>
<div class="index-b-right-1">
<h3>Videos</h3>
</div>
<div class="index-b-right-1">
<h3>Be a Friend</h3>
</div>
<div class="index-b-right-2">
<h4>You can show your appreciation and support future development by becoming a friend of the
Rosetta</h4>
</div>
<div class="index-b-right-3">
<h3>Donate</h3>
</div>
<div class="index-b-right-1"></div>
</div>
</div>
</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'm using Bootstrap v3.0.2. I want to display a series of divs next to each other, float: left then center that group in a full width row. What I get are the divs lined up next to each other but the entire group floats left.
I've tried numerous suggestions from this site but have been unable to make any of them work.
I have HTML:
<div id="wrapper">
<div class="container">
<div id="wrapBoxRow" class="row">
<div id="boxRow" class="col-md-12 col-xs-12">
<div id="boxWrap">
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
</div>
</div>
</div>
</div>
</div>
Css:
#boxWrap, #boxRow, #wrapBoxRow
{
float: none;
margin: 0 auto;
}
.smallBox
{
border: 3px solid #ddd;
float: left;
width: 20px;
height: 20px;
margin-right: 12px;
}
I've tried this without bootstrap and couldn't get it to work either:
<div id="boxWrap">
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
</div>
Please try the below CSS to horizontally center your div
#boxWrap, #boxRow, #wrapBoxRow
{
display: table;
margin: 0 auto;
}
You can find working code here http://bootply.com/92723