Why doesn't my bootstrap code scale down to mobile?
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<form action="" class="navbar-search pull-right">
<a href="#" class="btn btn-success">
<i class="icon-shopping-cart icon-white"></i> Checkout
</a>
</form>
</div>
</div>
</div>
On my computer I have to physically scroll to the right.
See the code running here: http://jsfiddle.net/nVw2V/
How can I get this to right-align down to mobile?
Thanks for all info
FYI: I tested by resizing the browser window and running [via PhoneGap] in an Android emulator
You need to include the bootstrap-responsive.css stylesheet in tandem with the bootstrap stylesheet in order to cover mobile devices.
Just include the following "after" the bootstrap.css stylesheet declaration:
http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css
Demo: http://jsfiddle.net/nVw2V/1/
Related
EDIT: It works with the new Version of Bootstrap, at least for me
I am working on a webpage with Boostrap 4. As far as I know col-xs-* got deprecated with 4.0 and the default for 0px up is now col-*.
I have set "col-6 col-md-12" but its always 12 columns wide.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="container-fluid" style="height: 100%">
<div class="row trenner">
<div class="col-6 col-md-12 logout">
<button class="logout"><i class="fa fa-sign-out-alt"></i><label class="btnLbl">Abmelden</label></button>
</div>
<div class="col-6 text-right wagenMobil">
<ul id="drop-dummy">
<button id="wagen-button"><i class="fas fa-shopping-cart"></i></button>
</ul>
</div>
</div>
Screenshot small Device
If I set only "col-6" it works.
If I do "col-6 col-sm-6 col-md-12" it will be 12 Columns wide until the breakpoint for sm, then its 6 and goes back to 12 when the breakpoint for md is reached.
"col-xs-*" does not work with bootsrap 4 anymore.
How do I get my Column to be 6 wide for xs devices?
It was Chromes responsive view that caused the problem. As seen in the screenshot all elements have a calculated width of 980px no matter how small you resize it.
If I don't use the responsive view in the dev options and resize the actual Browser window it works.
PS: almost lost my mind over this what I guess is a bug.
In some cases the bootstrap navbar-fixed-bottom will overlap other content without displaying a scrollbar.
For example https://jsfiddle.net/m5vgd9g7/1/:
<div>
<a class="btn btn-primary" href="#">
Button
</a>
</div>
<div class="navbar navbar-default navbar-fixed-bottom"
style="padding-bottom:0px; min-height:0px">
bottom
</div>
If you make the display pane very short vertically, the text "bottom" overlaps the button:
How can the overlap be prevented, so a vertical scrollbar appears before they overlap?
You should add a class to your top div which is row, so your top html would look like
<div class="row">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
This will add you a scrollbar for your content vertically. But when we declare a fixed navbar you should keep in mind to add a padding/margin to the rest of the content to the size of the navbar, which should display the rest of the content without being intruded by the navbar. So your final html for the top div would look like,
<div class="row" style="padding-bottom:15px;">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
Note: I would never use inline styles as it would complicate the html in the long run and hard to debug. I did it here for the sake of demonstration.
And the fiddle example is here : https://jsfiddle.net/m5vgd9g7/
EDIT
Thanks to #JDiMatteo who commented about the row class addition. I was about to maintain the bootstrap standards in grid system. (ref: http://getbootstrap.com/css/#grid). Apparently it seems row should be contained within container or container-fluid classes for it to work. This will define a row, where elements/columns(as in bootstrap) could reside in. And by using this, you can get rid of the custom styling we used earlier, padding/margin.
<div class="container">
<div class="row">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
</div>
I have the following navbar at the top of my page (heavily copied from a bootstrap 3 example) - you can ignore the Django template code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand plain" href="{% url 'home' %}">Miniquad Maps</a>
</div>
<form method="POST" action="{% url 'spot_search' %}" class="navbar-form navbar-left" role="search">
<div class="form-group">
<input id="spotsearch" type="text" class="form-control" placeholder="Search spots" name="spotsearch">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
{% csrf_token %}
</form>
</div>
</nav>
I am trying to figure out how to resize the search input (the one with id="spotsearch"). I would like to make it much wider, and I have tried many things, but the element seems to be constrained by something else (some bootstrap class no doubt, but I have not been able to figure out which one).
I have tried using .col-size-* in various places (among other things), but nothing seems to affect the input's width.
What am I missing here? Any suggestions as to how to resize the input, or where to look for good information on form sizing would be appreciated (I have read through the bootstrap docs on forms, but this has not been helpful so far in this respect).
Here is an example of the navbar: https://jsfiddle.net/38apotau/
I would like to resize the input to be at least twice the size it is in that example.
The width of the element is set to width: auto by bootstrap, giving the class hierarchy you have set.
You could override the input's width by giving it a specific pixel size:
#spotsearch { width: 350px; }
I am creating an mobile app using HTML/CSS/JS with Bootstrap and PhoneGap Build.
In my app I have a footer on my pages with 3 navigation buttons. The problem is that when I rotate my device from portrait to landscape, the buttons do not resize to take up the full width like they are supposed to. However, if I click one of the nav buttons after rotating, the new page that loads does show the buttons at full width. Rotating once again back to portrait, now has the buttons taking up way too much space.
I am utilizing <div class="btn-group btn-group-justified"> like the documentation states.
My footer HTML is as follows:
<nav id="footer" class="navbar-fixed-bottom col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4" role="navigation" style="padding: 0 0;">
<div id="footerGroup" class="btn-group btn-group-justified">
<a type="button" class="btn btn-default active" href="#"><span class="glyphicon glyphicon-home"></span> Home</a>
<a type="button" class="btn btn-default" href="fundHistoryPage.html"><span class="glyphicon glyphicon-align-justify"></span> History</a>
<a type="button" class="btn btn-default" href="calculatorPage.html"><span class="glyphicon glyphicon-usd"></span> Calc</a>
</div>
</nav>
I have also tried setting a resize event handler to remove the "btn-group-justified" class and re-add it but to no avail.
$( window ).resize(function(){
$("#footerGroup").removeClass('btn-group-justified');
$("#footerGroup").addClass('btn-group-justified');
});
Any advice would be appreciated.
Edit: The footer re-sizes perfectly when testing in the browser. Just not on test devices.
I hate answering my own question but I am going to anyways. After playing around with it a bit last night I ended up employing the following:
$( window ).resize(function(){
$("#footerGroup").removeClass('btn-group-justified');
setTimeout(function(){
$("#footerGroup").addClass('btn-group-justified');
}, 1);
});
I found that even a delay of just 1 millisecond before adding the class back in is enough to get it to resize properly. Very strange. Opened a new issue on the Bootstrap repo here.
<nav id="footer" class="navbar-fixed-bottom col-sm-12 col-sm-8 col-sm-offset-2 col-sm-6 col-sm-offset-3 col-sm-4 col-sm-offset-4" role="navigation" style="padding: 0 0;">
please maintain same sizes, providing multiple sizes may give you unwanted results
What I'm trying to do is have the search box in the center of the navbar (image here). How would I do that?
HTML:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">logo</a>
<div class="nav-collapse collapse">
<form class="navbar-form pull-right">
<div class="input-append">
<input class="span4" id="appendedInputButton" type="text" placeholder="Search...">
<button class="btn" type="button">Search</button>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
I'm using the default CSS that comes with Bootstrap.
wrap the form element within its own div and give it a class or an id, then create a custom line of code to center it, example:
HTML:
<div id="search">
*form code here*
</div>
CSS:
#search { width: 200px; margin: auto; }
if you need to override built in CSS in an application, use !important like so:
<div style="margin: 0px auto !important;"></div>
Or, put it in your css class.
See this...
.nav-collapse{
margin-right: 50%;
}
Example
Struggled with this for a long time too, for Bootstrap 3.
I finally found this solution which worked perfectly for me:
Bootstrap NavBar with left, center and right aligned items
Just added a class to the inside my navbar around my search box, with the css definition in Skelly's answer.
I did then have to apply text-align:left to some of elements in my form (e.g. typeahead suggestions attached to my search form).