I'm trying to make a button which connects to a mumble server. I'm using bootstrap for the CSS at the moment.
In my quick mock up I did earlier I had this button with the headphones icon, however I can't figure out to do it as the connect button requires the tag instead of the tag.
Here is a working version of the button the way i would like it styled and one of a working version of the mumble connect button.
Is it possible to use the icon with the <input>?
Styled button;
<button class="btn btn-large btn-primary" type="button"><i class="icon-headphones icon-white"></i> Connect to Mumble</button>
Connection 'button';
<input class="button" value="Connect" onclick="window.location.href='mumble://MUMBLE IP HERE/?version=1.2.3'" type="BUTTON" />
Try this-
<div class="input-prepend">
<span class="add-on"><i class="icon-user icon-black"></i></span>
<input type="text" name="login" class="//Some class" placeholder="Email address"/>
</div>
In case of appending it, Just replace .input-prepend with .input-append.
Example- http://jsfiddle.net/PYwq5/
Update bootstrap V3-
Append-
<div class="input-group">
<input type="email" class="form-control" />
<span class="input-group-addon">
icon</span>
</div>
Prepend-
<div class="input-group">
<span class="input-group-addon">
icon</span>
<input type="email" class="form-control" />
</div>
Demo- https://jsfiddle.net/DTcHh/9190/
Related
I am using radio buttons in Bootstrap 4 like this:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" id="physical-option" onclick="alert('Physical!')" checked="checked" /> Physical
</label>
<label class="btn btn-primary">
<input type="radio" id="scenery-option" onclick="alert('Scenery!')" /> Scenery
</label>
</div>
As you can see I have the onclicks there. But, when I click them, nothing happens! Is this a bug in Bootstrap?
Can you put the onclick on the label instead of the radio? I think bootstrap makes the label the radio trigger instead of the actual radio button.
Have a look at the scenery button:
https://jsfiddle.net/zf7p2Lbd/
<label class="btn btn-primary" onclick="alert('Scenery!')">
<input type="radio" id="scenery-option" /> Scenery
</label>
I've noticed something strange with Bootstrap 3's rendering of input groups, at least on Firefox and IE (Chrome untested):
As you can see, if there are two or more buttons preceding a text input, its left margin becomes wider.
Here is the code I used to reproduce this issue:
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/><br/>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
Is this expected/normal? How can I fix this?
Associated JSFiddle: https://jsfiddle.net/DTcHh/21418/
I assume you are talking about the double border you see on B? If so its just because there are 1px borders for B and C so when they show next to each other there are 2. This could be easily removed by using something like this:
.form-control {
border-left: 0;
}
But in doing this it will remove the border and it will show incorrectly if you use this technique with no other button elements next to it. If you add this HTML or view your updated js.fiddle so can see what I mean.
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/><br/>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/><br/>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
</div>
So I believe this is why the Bootstrap team has the double borders there because depending on what you need to do its probably better to have 2 borders on some occasions then none. Hope that helps.
Your structure is not correct per the Docs --> Multiple Button Input Group.
You're currently applying input-group-addon directly to the buttons, you want input-group-btn as the parent of the buttons (this is also why you're not seeing the btn-default styling also, it should be white, not grey).
Working Example;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<br/>
<br/>
<h1>Correct per Docs</h1>
<div class="input-group">
<div class="input-group-btn">
<span class="btn btn-default" id="basic-addon1">A</span>
<span class="btn btn-default" id="basic-addon2">B</span>
</div>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/>
<br/>
<h1>Questions Example</h1>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
</div>
I have a login form on a site that is using bootstrap. On desktop there is no problem. But on mobile devices the button doesn't work nor does the checkbox. There is also a link for the forgotten password but that doesn't work on mobile either.
<div class="col-md-4 col-xs-8">
<form method="post">
<div class="row">
<div class="input-group col-md-12">
<input type="text" class="form-control" style="margin-bottom:10px;" placeholder="User Name" aria-label="User Name" name="username"/>
<input type="hidden" value="true" name="login_now"/>
</div>
<div class="col-md-12 input-group">
<input type="password" class="form-control" placeholder="Password" aria-label="Password" name="password"/>
<span class="input-group-btn">
<button role="button" class="btn btn-blue" type="submit" aria-label="Log In" name="login_button">Log In</button>
</span>
</div>
<div class="col-md-12">
<input type="checkbox" name="save-password" />
Save Password (do not check box if using a public computer)
<a class="password-link" href="forgot_password.php">Forgot Password?</a>
</div>
</div>
</form>
</div>
I have no idea why this isn't working on mobile, but is working on desktop
So the problem seemed to have been the col-xs-8 at the top. It seemed to have caused the input to overlap the button
I need to change the style on a working search box to match the theme.
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
<div class="search_box">
<form id="form_search" name="form_search" method="get" action="<?php echo site_url();?>">
<input type="text" name="s" id="search_top" />
<input type="button" name="btn1" id="btn_top" value="" />
</form>
</div>
The first div is the style I need, the second is the working search box.
Respectively, here is what each looks like currently:
http://gyazo.com/ecd1b696f723879d5512588b1d384017
Manage the width of your parent container as per your requirement, but the get the search bar, as you are showing: check the linked fiddle:
https://jsfiddle.net/happy2deepak/d4jad6ah/
<div class="input-group">
<input type="text" class="form-control input-lg" placeholder="Search">
<span class="input-group-btn">
<button type="button" class="btn btn-dark btn-lg">Go!</button>
</span>
</div>
I am using following code in my project:
<input class="btn btn-default btn-file" type="file" id="file" style="float:left; width: 250px" name='athletes_imageid' value="" />
However my default button still stays on top of bootstrap one. Any way of fixing that?
Just put class to <span> like,
<span class="btn btn-default btn-file">
<input type="file" id="file" style="float:left; width: 250px" name='athletes_imageid' value="" />
</span>