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"
Related
First of all hi and thanks for your time!
I have a problem that I can't solve with bootsrap, I'm trying to center 2 buttons inside a div, in this code the buttons are aligned left, how can I center them?
Here is my code:
<div class="align-self-center">
<button type="button" class="btn btn-outline-primary"> BTN1</button><button type="button" class="btn btn-success">BTN2</button>
</div>
Use text-center class provided by bootstrap to align your buttons.
<div class="text-center">
<button type="button" class="btn btn-outline-primary">BTN1</button>
<button type="button" class="btn btn-success">BTN2</button>
</div>
The text-center class is basically doing -
text-align:center;
P.S. Not sure what .align-self-center is doing here
Suggestion - I see that you are using bootstrap 4. You can also use the class "btn-group" if it meets your requirements.
Click here to go to bootstrap 4 docs
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 have three buttons and I want them to be on the same line, take all the space and every button has to be the same size.
And as soon as the window is too small to show every button at at least 170px width, I want every button to have their own line and take 100% of it.
I remember seeing websites that have navigation bars which work somewhat like this..
This is what my code currently looks like:
<div class="modal-body">
<button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button A</button><span></span>
<button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button B</button><span></span>
<button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button C</button>
</div>
The first part seems to work fine, but when the window gets too small, the buttons don't take 100% width on their line:
Is there a bootstrap way to achieve that? Or is a css hack necessary?
I would rewrite the HTML to look like this.
<div class="modal-body">
<div class="row">
<div class="col-lg-4 col-sm-12">
<button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
</div>
<div class="col-lg-4 col-sm-12">
<button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
</div>
<div class="col-lg-4 col-sm-12">
<button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
</div>
</div>
</div>
You will need to add a media query to css
button{
width: 170px
}
#media (max-width: 540px){
button{
width: 100%;
}
}
For best results add a parent class to button
if you are using Bootstrap then you should be able to use the 'col' CSS selector
you should be able to apply a container (or row) class depending how much of the screen you want to fill, then apply 'col-md-4 col-sm-12' (depending on the breakpoint you want it to go 100%) to all the buttons you shouldn't write the CSS inline like the example above use the bootstrap classes...
link to the bootstrap documentation http://getbootstrap.com/
Please refer to the Bootstrap grid system documentation to understand more about Col settings on different sizes.
http://getbootstrap.com/css/#grid
I've this Bootstrap HTML markup:
<div class="container">
<div class="field col-md-6 col-md-offset-3">
<button type="button" class="btn btn-block btn-primary">Large button</button>
<button type="button" class="btn btn-primary">X</button>
</div>
</div>
I would like the large button to fill the column (col-md-6), therefore I've used btn-block. But I would like the X button to float right in the same line, taking a bit of the width of the Large button.
The X button should stay small, and the Large button should fill up the rest of the width.
How can I do that?
See my JSFiddle.
You'll want to use input groups to keep everything together.
http://getbootstrap.com/components/#input-groups
Extend form controls by adding text or buttons before, after, or on
both sides of any text-based . Use .input-group with an
.input-group-addon to prepend or append elements to a single
.form-control.
Buttons in input groups are a bit different and require one extra
level of nesting. Instead of .input-group-addon, you'll need to use
.input-group-btn to wrap the buttons. This is required due to default
browser styles that cannot be overridden.
Here is the modification I made to your fiddle.
http://jsfiddle.net/oayw7uhh/5/
All you need to do is surround both elements with a input-group-div
Then, wrap the X button in a span with the class input-group-btn.
https://jsfiddle.net/dennismadsen/oayw7uhh/
Your finished code is
<div class="container">
<div class="field col-md-6 col-md-offset-3">
<div class="input-group">
<button type="button" class="btn btn-block btn-primary">Large button</button>
<span class="input-group-btn">
<button type="button" class="btn btn-primary">X</button>
</span>
</div>
</div>
</div>
The Bootstrap 3 navbar provides a header area and a collapsible area. The header area houses a branding link that is permanent and the collapsible area houses everything else that collapses under a hamburger icon when the window is shrunk. I am trying to add a select box and a button to the header area with the intent that they should be displayed permanently and not collapse when the window is shrunk. This is what I have tried so far (full code available in a codepen here)
<div class="navbar-header">
<-- Hamburger button -->
<button type="button" class="navbar-toggle" ...>
...
</button>
<a class="navbar-brand" href="#">Brand</a>
<!-- Permanent select box -->
<select class="navbar-text navbar-left">
<option>Option 1</option>
<option>Option 2</option>
</select>
<!-- Permanent button -->
<button type="button" class="btn btn-default btn-sm navbar-btn navbar-left">
Action
</button>
</div>
Unfortunately I am seeing two problems:
The header wraps making the select box and the button fall below the brand link (you have to resize the window from small to big to see this effect).
Althought the button is specified as small, it shows up as big
Any idea how to solve these issues?
1) You could override the CSS and add this
.navbar-header{
min-width: 275px;
}
2) You can change btn-sm to btn-xs if you need the button to be smaller.
See demo