bootstrap mobile first grid inline full screen - twitter-bootstrap-3

I am trying to build a mobile first web page and so I am testing Bootstrap grid system as this seemed the easy way forward, but I am having trouble getting the grid to go full length on a mobile iphone 6s (same with all screen sizes within this range).
I have a test script with 6 columns to be displayed inline across the screen.
If I use the following col-xs the grid lines up inline but there is a large amount of white space to the right. Code and screen shot shown below.
<div class="container">
<div class="row">
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
</div>
</div>
If I change the code to col-sm I get the grid stacked up as shown below screen shot
What is the best approach to get these boxes lined up side by side across the whole screen. Should I use padding or width % CSS on each box or is there a better approach to this than Bootstrap

Since you are new to bootstrap i recomend you start with boostrap v4 which has solved this problem.
just take a look at https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works
here is an example. every column automatically become 33.33% of entire screen width
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Update
If you insist on using bootstrap v3, use can do something like this:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container ">
<div class="row row-eq-height">
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
</div>
</div>

Related

position:-webkit-sticky not working on Safari

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;}

Bootstrap accordion icons not working on collapsed states

I am working on a accordion in Bootstrap V 3.37. I have icons on the accordion which change with open and closed states. When I the state set to collapse init works fine. But when I have the accordion with none of them accordions collapsed in the icons are not working properly.
The icons should be working as:
Arrow facing down on closed state
Arrow facing up on open state
My code is as follows so far:
HTML Structure
<!-- Panel list accordion -->
<div class="panel-group">
<div class="panel-heading-one panel-main-heading-one">
<h4 class="panel-title panel-main-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<img src="../images/image.svg" class="panel-icon">
<p>Title here</p>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body panel-bodymain-one">
<p>Text body here</p>
</div>
</div>
<div class="panel-heading-one panel-main-heading-one">
<h4 class="panel-title panel-main-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<img src="../images/image.svg" class="panel-icon">
<p>Title here</p>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body panel-bodymain-one">
<p>Title body here</p>
</div>
</div>
<div class="panel-heading-one panel-main-heading-one">
<h4 class="panel-title panel-main-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<img src="../images/image.svg" class="panel-icon">
<p>Title here</p>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body panel-bodymain-one">
<p>Text body here</p>
</div>
</div>
</div>
</div>
<!-- End panel list accordion -->
CSS
.panel-heading-one .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings';
content: "\e113";
float: right;
color: #ffffff;
height: 24px;
width: 40px;
background-color: #000000;
}
.panel-heading-one .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e114";
}
Screenshots attached also.
Closed state - still point up:
Open state is fine as it points up:
Any help would be great.
Change your css to:
.panel-heading-one .accordion-toggle:after{
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: #ffffff;
height: 24px;
width: 40px;
background-color: #000000;
}
.panel-heading-one .accordion-toggle[aria-expanded="true"]:after {
/* symbol for "opening" panels */
content: "\e113";
}
.panel-heading-one .accordion-toggle[aria-expanded="false"]:after {
/* symbol for "collapsed" panels */
content: "\e114";
}
And it will work perfectly.
Extra: In your accordion you have used same href='#collapseThree'
for last and second last item. When you will click on last element, it
will open second last item. So change your href in last element.

Importing bg image for jumbotron - bootstrap 3

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.

Stacked progress bars with labels and min-width

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>

How can I place a div below a navbar

I need to place a div below my top navbar which should not scroll with the page content just like the navbar.
I've tried to create it as a second navbar but it is still scrolling or causing a blank area above the two navbars.
How can I do this?
UPDATE
In this sample the green bar is on top of the navbar, but I need it to stay below the navbar: http://jsfiddle.net/julianonunes/y8YqK/
If I move the green bar code (code sample below) before the navbar, it is hidden by the navbar.
Ex:
<div class="navbar navbar-decoration navbar-fixed-top"></div>
<div class="navbar navbar-default navbar-remote navbar-fixed-top">
<div class="navbar-header"> Brand
</div>
</div>
Ok. The problem is your second div includes 'navbar-fixed-top' which is glueing it to the top of your screen. You don't want it fixed to the top - you just want it fixed in place below the main navbar. Change your html for the second nag to:
<div class="navbar navbar-default navbar-remote navbar-decoration ">
And add to your navbar-decoration class:
width: 100%
position: fixed;
You may have tried this already, but in the css for the second navbar put
position: fixed;
If you don't want to add to your stylesheet, you can put it in the div like this:
<div style="position: fixed;"> </div>
I am not sure, but you may also have to add display:block like this:
<div style="position: fixed; display: block;"> </div>
With Bootstrap, use this logic within their html/css:
<div class="navbar" style="position: fixed; display: block;">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
My last guess:
<div class="navbar" style="margin-top: 10px;">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
Hope one of those works.
I've got it fixed by adding margin-top to the second navbar with navbar-fixed-top.
<div class="navbar navbar-default navbar-remote navbar-fixed-top">
<div class="navbar-header"> Brand
</div>
</div>
<div class="navbar navbar-decoration navbar-fixed-top"></div>
CSS
.navbar-decoration {
margin-top: 50px;
min-height: 5px;
max-height: 5px;
/* ... */
}