This is the code I have for my navbar:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<button type="button" class="navbar-nav btn btn-default navbar-btn navbar-left previous_page" style="display:inline-block">
<span class="glyphicon glyphicon-menu-left"></span>
back
</button>
<div class="text-center" id="progress-bar" style="display:inline-block">
<div data-page="0" class="counter active"></div>
<div data-page="1" class="counter "></div>
<div data-page="2" class="counter "></div>
<div data-page="3" class="counter "></div>
<div data-page="4" class="counter "></div>
</div>
<button type="button" class="navbar-nav btn btn-default navbar-btn navbar-right next_page disabled" style="margin-right:0px;display:inline-block">
next
<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</nav>
On Safari on iPhone 7, 8, X devices, when you FIRST load the page, the navbar appears on 2 different lines like so:
Then, when you refresh or reload it, it appears normal like so:
I'm having a really hard time figuring out how to get it to always appear normal, and am even more boggled by why a secondary page load corrects the issue.
Note, I added display:inline-block to all 3 navbar elements to try to correct this problem. It's done something... BEFORE I added it, when it was just Bootstrap native styling, on the Safari and iPhone 7, 8, X devices, even refreshing wouldn't help, and the navbar would stay split on 2 rows.
I am using Bootstrap 3.3.4
I go through this i found this solution rather than giving it inline you can use bootstrap class checkbox-inline which will make the center div inline and give navbar text-center class. Use pull-left and pull-right instead navbar-left and navbar-right. Hope it will help you :)
<nav class="navbar navbar-default navbar-fixed-top text-center" style="background: red;">
<div class="container-fluid">
<button type="button" class="navbar-nav btn btn-default navbar-btn pull-left previous_page">
<span class="glyphicon glyphicon-menu-left"></span>
back
</button>
<div class="text-center checkbox-inline" id="progress-bar">
<div data-page="0" class="counter active"></div>
<div data-page="1" class="counter "></div>
<div data-page="2" class="counter "></div>
<div data-page="3" class="counter "></div>
<div data-page="4" class="counter "></div>
</div>
<button type="button" class="navbar-nav btn btn-default navbar-btn pull-right next_page disabled">
next
<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</nav>
I had the same problem. I solved it by fixing the height of the navbar. Try giving the navbar a fixed height: i.e
.container_navbar{ height: 60px; ... }
The fixed height works across all devices.
Hope this works for you
Best regards
Related
I am quite new to Bootstrap 4. I can't seem to get my 3 buttons centered in the middle of the page. I am using Bootstrap-4. I feel it is something simple I am missing. Also is there a way to extend the buttons a little more outside the text, would I use padding for that? Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="Sanchez_Bootstrap_index.css">
</style>
<title>Sanchez</title>
</head>
<body>
<!--NAVBAR-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Sanchez</a>
<!--Toggle Button-->
<button class="navbar-toggler"
data-toggle="collapse"
data-target="#navbar"aria-controls="navbarTogglerDemo01" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" a href="Sanchez_Bootstrap_about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="Sanchez_bootstrap_portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link disabled"
href="Sanchez_bootstrap_contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="content">
<div class="container text-center">
<div class="row">
<div class="col-lg-12">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_about.html">Web
Developer</a>
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_portfolio.html">Portfolio</a>
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_contact.html">Contact</a>
</<div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta/js/bootstrap.min.js" integrity="sha384-
h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
</body>
</html>
CSS
body{
background-image: url('images/background3.jpeg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
color: white;
}
#media only screen and (max-width: 767px) {
body {
background-image: url('images/background3.jpeg');
}
html{
height: 100%;
}
#content{
align-items: center;
text-align: center;
}
Please share a screenshot of the web page and the problem to explain it better. Also, there are few points I would like to bring to attention.
Why are you not including jquery.min.js in the head when bootstrap nav depends on it to work? It should be before bootstrap src
You have a typo </<div> please check your code
What do mean by centering the buttons?
You mean centering side by side? like this: or you mean centering as in stacked?
For the former case, I used this code:
<div id="content">
<div class="container text-center" style = "vertical-align:middle;
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12" >
<div class="row" style = "line-height: 20em;">
<div class="col-lg-4 col-sm-4 col-xs-4 col-md-4" style = "vertical-align: middle;">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_about.html" >Web
Developer</a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4 col-md-4" style = "vertical-align: middle;">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_portfolio.html" >Portfolio</a>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4 col-md-4" style = "vertical-align: middle;">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_contact.html" >Contact</a>
</div>
</div>
</div>
</div>
</div>
For the latter, I used:
<div id="content">
<div class="container text-center">
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_about.html" >Web
Developer</a>
</div>
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_portfolio.html" >Portfolio</a>
</div>
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<a class="btn btn-dark btn-lg" a
href="Sanchez_Bootstrap_contact.html" >Contact</a>
</div>
</div>
</div>
</div>
</div>
For bootstrap divs, think about dividing divs in to subdivs and then give them elements. For col-lg-12, we have 12 blocks. If you want three inner elements, divide 12 by 3 which is 4. So wrap each of the three elements in col-lg-4. The width would be: 100/3 = 33.33% Similarly, if you want three elements with each 100% wide, wrap the three in each col-lg-12 div and each will have width of 100/1 = 100%
Its better to have a habit of specifying lg, sm, xs and md when you are writing the code itself and use a mobile first development methodology to think how its gonna look on each mobile devices right away. i.e. specify col-lg-12 col-sm-12 col-xs-12 col-md-12 in each div.
Note: I used your code in an ongoing project, so few css have been inherited form my code, like font width, button coloring, background etc
Im working on a section on a webpage, using bootstrap but cant keep filter on same line. Ive tried a few ways, currently trying columns, tried divs inline, still not lining up correctly.
div class="col-lg-12">
<div class="row">
<div class="col-lg-10">
<div class="rev-search" style="overflow: hidden; padding-right:.5em;" >
<input type="text" style="width: 80%;" id="rev-search" placeholder="Search" autofocus="" />
<span><i class="fa fa-search"></i></span>
</div>
</div>
<div class="col-lg-2">
<div class="dropdown pull-right">
<button class="btn btn-default dropdown-toggle" style="float: right;" type="button" id="group_filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><?php echo $text_filter_group;?><span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="group_filter">
<?php
foreach ($customer_groups as $group){
echo '<li>'.$group['name'].'</li>';
}
?>
</ul>
</div>
</div>
</div>
I believe it's because there is padding on the col-lg-10 and col-lg-2. Add this to your css to remove the padding which is pushing your drop down to the next row.
.col-lg-10, .col-lg-2 {
padding: 0;
}
Following the Bootstrap documentation, please use lg (for larger desktops).
Also try wrapping your row in a fluid container.
<div class="container-fluid">
<div class="row">
</div>
</div>
I am building a responsive calendar that has full-width buttons on it (events), and it shows extra info with the collapse component under it. But the button keeps appearing superimposed so it doesn't display the info correctly...
This is one of my event buttons:
<!--Event 1-->
<div class="div-event col-md-6">
<span class="date-event col-xs-2 col-md-1"><span class="num-date-event">22</span><br>SEP</span>
<button class="btn btn-event btn-block col-xs-8 col-md-4" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">Kate's Super Party<br>at her house</button>
<span class="glyphicon glyphicon-gift icon-event col-xs-2 col-md-1" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>
<div class="collapse" id="collapse-1">
<div class="well">
Hi, I'm a collapsable well that shows something but I can't be seen because of the weird css I have!
</div>
</div>
<div class="clearfix"></div>
</div>
I have tried using margin-top and position but it hasn't worked.
Is there a way to "separate" the collapse from the parent row? Or any other way to do it?
Here is the full calendar: https://jsfiddle.net/mrndrmrj/16/
In following span add margin-bottom:10px
<span class="glyphicon glyphicon-gift icon-event col-xs-2 col-md-1" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>
Well, I found that the problem was grouping the event with the collapsable "well", so putting the well outside the div-event made it work!
This is one of the events corrected:
<!--Event 1-->
<div class="div-event">
<span class="date-event col-xs-2 col-md-2"><span class="num-date-event">22</span><br>SEP</span>
<button class="btn btn-event btn-block col-xs-8 col-md-8" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">Kate's Super Party<br>at her house</button>
<span class="glyphicon glyphicon-gift icon-event col-xs-2 col-md-2" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>
<div class="clearfix"></div>
</div>
<div class="collapse" id="collapse-1">
<div class="well">
Hi, I'm a collapsable well that shows something and now I can be seen, but not the last two guys.
</div>
</div>
And this is the updated fiddle with the first two events corrected and the last two wrong so you can see the difference...
https://jsfiddle.net/mrndrmrj/20/
I am working with a legacy bootstrap tool for my company. An issue I am having is using panels from bootstrap 3 in the legacy version.
While this is working to an extent, there are some span issues that are coming up.
I have a container with a panel on the page which is inside of a span12 (full length of the page). Within the panel, I am trying to add another panel that is full width of it. Normally I would say, span12 and it would adjust it to what is necessary but in this case, its causing it to hang over.
Here is a sample of the HTML being used:
<div id="main" class="container">
<div class="panel panel-primary custom-panel">
<div class="panel-heading ph"> <span class="panel-title"><i class="icon-bullhorn"></i> Request Communication</span><button name="addComment" commenttype="request" type="button" class="btn btn-mini pull-right"><i class="icon-plus"></i> Add Comment</button></div>
<div class="panel-body well">
<div id="requestComments" class="tab-pane active">
<span name="messages">
<div name="parent_32" class="row parentMessage">
<div class="span12">
<div class="panel panel-default">
<div class="panel-heading">
<small><a target="_BLANK" href="#">Name</a> <span class="text-muted">commented <a title="Timestamp: 2015-08-24 11:20 UTC" data-toggle="tooltip" class="deco-none">2 days ago</a></span></small>
<div class="btn-group pull-right">
<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-mini dropdown-toggle" type="button"><i class="icon-cog"></i></button>
<ul class="dropdown-menu">
<li><a messageid="32" name="deleteParent"><i class="icon-trash"></i> Delete Message</a></li>
</ul>
</div>
</div>
<div class="panel-body"><small>dgdfgdfg</small></div>
</div>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/j2j6gnb1/
How can I go about making the inner panel, the full width of its parent (with the same padding it has on the left)?
Remove the margins being set on elements .parentMessage and .span and set width: 100% on the .span12 element.
.parentMessage {
margin: 0;
}
.span12 {
width: 100%;
margin: 0;
}
Fiddle
On this page: (link removed)
I'm starting to build a tumblr theme, and I have decided to build it using bootstrap. If you click the little I info button in the left corner, a div comes down with a user picture and description. The user picture and description appear as I want them to, but they are off center. I'd like them to be centered. I've tried < center >, using a fluid width container, etc with no avail. I also checked and bootstrap.css and the bootstrap.min.js are properly linked to the page.
Any help with this would be GREAT!
My code:
<div class="container-fluid" id="foo" style="z-index:5; display:none; height:auto;">
<center>
<div class="container-fluid" style="height:auto;">
<div class="row">
<div class="col-md-2" style=" margin-top:1%;"><img class="avatar-style-circle" src="{PortraitURL-128}" /><br/><h3>{AuthorName}</h3></div>
<div class="col-xs-12 col-md-8" style="background-color:blue; margin-top:3%;"><p style="text-align:justify;">{Description}<br/></p></div></div></div>
<div class="container-fluid" style="height:auto; margin-bottom:2%;">
<center>
<div class="container-fluid">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
<br/>
<div class="btn-group" role="group" aria-label="..."> Ask
Archive
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="z-index:5; margin-left:13%;">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div><!-- /.col-lg-6 --></center>
</div>
</div>
</div>
</div>
<div class="site-wrapper">
{block:ifShowInfoButton}
<i class="fa fa-info-circle fa-3x" style="position:absolute; margin-left:0.4%; margin-top:0.4%; color:{color:Info Button Color};"></i>
{/block:ifShowInfoButton}
Change the col on the picture from md-2 to md-4.
Or change the col on the text from md-8 to md-10 (better)!
It works on a 12 grid system and currently it is only using 10 columns out of 12, which is why it appears to align to the left :)
You can also use offset.
papakia's answer is correct however you could also add an empty column in front of your image column that is col-md-2 this will sometimes help not throw off the scale of other items if they are already tuned to your liking.