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; }
Related
Here's how my django filter form looks like:
I need to horizontally space them a little so that 'Name contains' and the search bar, and 'result' etc are not glued to each other.
Here's my html code:
<form action="" method="get" class="form-inline text-white justify-content-center mx-3">
{{myfilter.form|bootstrap}}
<button class="btn btn-primary" type="submit">
Search</button>
</form>
I have tried adding m-3, mx-3 etc but they don't work. Little help will be appreciated. Thanks!
First of all, I have to to explain you that you apply m-3 or mx-3 class to the form tag so that the mx-3 gives margin to form tab only and the Name contains and the search bar and result etc. are the child element of the form.
So the mx-3 class will work if you add it to the particular element.
Now, the solution for your problem should be:
If you put class="mx-3" to every form element.
Or you have to apply CSS as follow.
HTML
<form action="" method="get" class="weekly_calls_form form-inline text-white justify-content-center">
{{myfilter.form|bootstrap}}
<button class="btn btn-primary" type="submit">Search</button>
</form>
I have added my custom class to the form tag named weekly_calls_form
Now using this class I apply CSS to all element of the form tag.
CSS
.weekly_calls_form > *{
margin: 0px 5px;
}
This CSS apply to all the direct child elements of form.
Here is my jsFiddle (you'll have to expand the Result pane to see it in all its glory).
Notice how the green Sign up button is:
Pinned to the top of the navbar; and
Doesn't seem to look like a normal "success" button (example here)
I can't tell if it's because I'm using a CDN (and perhaps the CDN is out of date) or if these 2 things are happening because I'm lacking some CSS rules in the following code:
<ul class="nav navbar-nav navbar-right">
<li class="active"><button type="button" class="button btn-success">Sign up</button></li>
<li class="active"><button type="button" class="button btn-link">Sign in</button></li>
</ul>
Any ideas where I'm going awry?
First of all you need to use the btn class instead of button class on your buttons, then you need to wrap your buttons inside a navbar form parent to position them properly like so:
<form class="navbar-form navbar-right">
<div class="form-group">
<button type="button" class="btn btn-success">Sign up</button>
<button type="button" class="btn btn-link">Sign in</button>
</div>
</form>
https://jsfiddle.net/71j5psr0/6/
You should probably change your buttons to links, just keep in mind in a navbar by default links inside of your list items will take up the full height of the navbar itself and will be inherit a unique style. You can apply the same btn-* classes to links and they will appear exactly as buttons do.
you can try this class="btn btn-success btn-lg"
In your code YOU use "button" in the place of "btn"
How do i set width of input in this case in bootstrap 3.0
Here is the example http://jsfiddle.net/6eBFz/
code
<div class="submit">
<div class="col-md-8 col-sm-8">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="col-md-4 col-sm-4">
<div class="input-group">
<input type="text" class="form-control ">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Add </button>
</span>
</div>
</div>
</div>
i am looking at the bootstrap way and not custom css
Bootstrap inputs take on the width of their container.
From the Bootstrap docs (http://getbootstrap.com/css/#forms-inline)..
"Inputs, selects, and textareas are 100% wide by default in Bootstrap.
To use the inline form, you'll have to set a width on the form
controls used within."
CSS: .set-width{ width: 50%; }
HTML: <div class="input-group set-width">
You can add a set-width method (call it whatever you want) on any div and then manually size it in your CSS. I wouldn't recommend adding style="width: 50%;" to code because it makes it less readable and makes it much harder to edit later on. Plus with making a CSS class you can reuse it on several input fields (or anything else that you want to be set to that width really! Width can be set in pixels, or in em.
Here is a helpful resource to understand CSS classes and ID's
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).
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/