I am trying to create a very minimal input field with a glyphicon button.
Unfortunately there is a white border even though i have cleared everything.
HTML:
<div class="input-group input-group-lg">
<input type="text" class="form-control transp" placeholder="Search">
<span class="input-group-btn">
<button class="transp btn btn-default " type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
CSS:
.transp {
background:none!important;
background-color: rgba(255,255,255,0.8)!important;
border:none!important;
border-color:none!important;
text-shadow:none!important;
box-shadow:none!important;
}
See this Bootply Example as a demonstration of the white button border:
Bootply - Button Border
The margin on .input-group-btn:last-child>.btn is the cause.
Add this to your CSS:
.input-group-btn:last-child>.transp {
margin-left: 0;
}
Related
When I attempt to apply a maximum width to an input field, it positions the secondary button as if the input field didn't have a maximum width.
JSFiddle Example
HTML:
<div class="container">
<div class="form-group">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
<span class="input-group-btn">
<button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
</span>
</div>
</div>
</div>
CSS:
.datefield {
max-width: 100px;
}
Result:
How can I get the secondary button to correctly sit next to the text field?
Try using display:inline-block;
https://jsfiddle.net/ex3ntia/DTcHh/22030/
.input-group-btn {display:inline-block;}
Bootstrap is laid out by using a grid system. You will need to adjust your design layout to accomplish what you are looking to achieve.
What is happening now is all you are doing is shrinking down the size of the input box, but not the actual grid cell.
try adjusting just the cell or placing the form-group elements within a cell then within a targeting element you can shrink.
Try this,
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
padding: 10px;
}
.shrink {
width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="form-group">
<div class="shrink">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
<span class="input-group-btn">
<button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
</span>
</div><!-- .input-group -->
</div><!-- .shrink -->
</div><!-- .form-group -->
</div><!-- .row -->
</div> <!-- .container -->
Hope that helps!
The span was not being displayed inline. I assume this was changed with the input-group-btn class. Here is the new code (I named the new class ):
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.datefield {
max-width: 100px;
}
.buttoncleardiv {
display: inline;
}
<div class="container">
<div class="form-group">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
<span class="input-group-btn buttoncleardiv">
<button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
</span>
</div>
</div>
The JS Fiddle is here
I am using a Bootstrap navbar and using it's collapse functionality.
In my fully expanded navbar, I have three elements - a search field and it's button, and also a browse button.
When it collapses, I would like to have the search field and it's submit button to appear on the same line. However, when my navbar collapses, it places the search field on it's own line, and then the "submit" and "browse" button on the same line. The image below shows what I mean.
I would like it to have the search field and the glyphicon 'submit' button on one line, and the browse button on the line below.
Here is the html I am using:
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control">
</div><!--
--><button type="submit" class="btn btn-default btn-search"">
<span class="glyphicon glyphicon-search"></span>
</button>
<button type="submit" class="btn btn-default">Browse</button>
</form>
</div>
Put you button inside the form-group,
<div class="form-group">
<input type="text" class="form-control">
<button type="submit" class="btn btn-default btn-search">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
add this to your CSS,
.navbar-form .form-group input {
width: calc(100% - 50px);
display: inline-block;
vertical-align: top;
}
and here is a fiddle demo
try this one
.form-control{display:inline-block;width:80%}.btn-search{width:10%}
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control"><button type="submit" class="btn btn-default btn-search"">
<span class="glyphicon glyphicon-search"></span>
</button></div>
<button type="submit" class="btn btn-default">Browse</button>
</form>
</div>
At mobile screens you can position your search button to absolute and then place it over the search input to the right and then give the input a padding to the right and it will appear to be on the same line. So first position your .navbar-form to relative and then at mobile widths positon your search button to absolute and then give the the search input a padding right to make up for the button being placed over the top of it like so:
Here is a fiddle Fiddle
.navbar-form{
position: relative;
}
#media screen and (max-width: 767px){
.navbar-form .btn-search{
position: absolute;
right: 15px;
top: 10px;
}
.navbar-form input{
padding-right: 40px;
}
}
I am using bootstrap 3. I want to change button color when I click on button.I mean button should be in different color when it is selected. How can I do this using css?
My codes are :
<div class="col-sm-12" id="">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
CSS has different pseudo selector by which you can achieve such effect. In your case you can use
:active : if you want background color only when the button is clicked and don't want to persist.
:focus: if you want background color untill the focus is on the button.
button:active{
background:olive;
}
and
button:focus{
background:olive;
}
JsFiddle Example
P.S.: Please don't give the number in Id attribute of html elements.
CSS has many pseudo selector like, :active, :hover, :focus so you can use.
.btn{
background: #ccc;
} .btn:focus{
background: red;
}
<div class="col-sm-12" id="my_styles">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
JsFiddle
HTML--
<div class="col-sm-12" id="my_styles">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
css--
.active{
background:red;
}
button.btn:active{
background:red;
}
jQuery--
jQuery("#my_styles .btn").click(function(){
jQuery("#my_styles .btn").removeClass('active');
jQuery(this).toggleClass('active');
});
view the live demo on jsfiddle
How can I prevent bootstrap button goups from breaking in to 2 lines when there is less space?
I am trying to use the below Bootstrap code:
<div class="btn-group" style=" width:100px ;">
<button type="button" class="btn btn-default" style=" width:30px;">-</button>
<input type="text" class="form-control" style="width:30px;">
<button type="button" class="btn btn-default" style=" width:30px;"> +</button>
</div>
And it looks like:
This is what worked for me, turn the group of buttons to a flex item (by default it does not wrap):
.btn-group {
display: flex;
}
I saw this here, and there are more options too:
https://github.com/twbs/bootstrap/issues/9939
I have another Bootstrap related problem.
I want to add radio and checkboxes to my form, I would like them also to take 100% width of form element.
I've added button group as this:
<div class="form-group">
<label class="col-sm-3 control-label">Subscribe</label>
<div class="col-sm-9">
<div class="btn-group input-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio" name="options" id="option1" />Yes</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" />Maybe</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option3" />No</label>
</div>
</div>
</div>
This gives me nice radio-like buttons:
But as You can see they have fixed width. Can this be fixed with bootstrap classes?
Again here is my sample code: http://jsfiddle.net/Misiu/yy5HZ/5/
Use the built in .btn-group-justified class: Offical Docs
Make a group of buttons stretch at equal sizes to span the entire
width of its parent. Also works with button dropdowns within the
button group.
Anchors:
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
Left
Middle
Right
</div>
Buttons:
To use justified button groups with <button> elements, you must wrap
each button in a button group. Most browsers don't properly apply our
CSS for justification to <button> elements, but since we support
button dropdowns, we can work around that.
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
JSFiddle
You can simply use the bootstrap col-n classes so if you have 2 buttons you use col-xs-6 on them. The problem is when you have 5 buttons for example. There is no class for that in the bootstrap grid system. So I woul use one of the following:
To differenciate between groups with different number of buttons use additional custom classes:
JSFiddle
CSS
.btn-group {
width: 100%;
}
.btn-group-2 label.btn {
width: 50%;
}
.btn-group-3 label.btn {
width: 33.3%;
}
HTML
<div class="btn-group btn-group-3 input-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio" name="options" id="option1" />Yes</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" />Maybe</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option3" />No</label>
</div>
If you want to avoid these css classes you can only use jQuery:
JSFiddle
$('.btn-group').each(function(index, item) {
$(item).find('.btn').css(
'width', 100 / $(item).find('.btn').length + '%'
)
});
Another solution:
.btn-group {
display: flex;
flex-direction: row;
}
.btn-group > button {
width: 100%;
}
For boostrap 4 the docs say you can do this:
Removed .btn-group-justified. As a replacement you can use <div class="btn-group d-flex" role="group"></div> as a wrapper around elements with .w-100.
You can just add a class of your own and give them a 33% width (for the 3 buttons) or 50% width (for the 2 buttons).
If #Schmalzy's solution doesn't work then you might be using Bootstrap v3.0.0, for which add the following styles in addition to the html markup in #Schmalzy's solution.
.btn-group-justified > .btn-group .btn {
width: 100%;
}
.btn-group-justified > .btn, .btn-group-justified > .btn-group {
display: table-cell;
float: none;
width: 1%;
}