So I'm building a navbar on a website with a search bar included, along with a grouped button. It works fine on a desktop view, but when I shrink down to mobile view and the site produces the collapsible menu, the search bar stays to the left, but the button floats off to the right. I do not have this issue when I remove the span with the input-group-btn class that surrounds it.
<form class="navbar-form navbar-left form-inline" role="search">
<div class="row">
<div class="input-group">
<input type="text" class="form-control" style="width: 250px;"/>
<span class='input-group-btn'>
<button type="button" class="btn btn-default" aria-label="Search">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</span>
</div>
</div>
</form>
Picture included
http://bit.ly/1G706rC
EDIT: I fixed my own issue! I just had to add a pull-left class to the span
The issue might be something to do with the width of the text-input to be fixed in px. Try a relative measure in percentages (%) and it might work since it will resize according to the window size.
Related
Here is my current UI:
[![enter image description here][1]][1]
I would like to move the red button shown in the picture to the left side of the input. So far I've tried adding a margin-left property but that did not work. Does anyone have a suggestion on how to get the button to move to the left? I'd like to have it aligned with the bottom input field.
Put
style="position:absolute"
to your button, you will be able to move with Left after that.
Bootstrap 3 has a control called a Input Group. You can use it like this:
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<input type="text" class="form-control">
</div>
Note: To move the button to the left or right, simply move the <input> above or below the <div class="input-group-btn">
Try this
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
The solution was easier than I thought, instead of adding margin-left I added margin-right: 20px and it worked.
I am using bootstrap to build an responsive website (small social network), I used glyphicons with buttons and it works fine on full screen, my problem is that the glyphicons go outside the border of the button whenever the browser width is decreased image included:
the code is:
<div class="row">
<div class="btn-group-vertical col-sm-2" style="width: 9% ">
<br/><br/><br/>
<button type="button" class ="btn btn-default" style="font-size:3vw"><span class="glyphicon glyphicon-thumbs-up" style="vertical-align:middle;text-align: center;"></span></button>
<button type="button" class="btn btn-default" style="font-size:3vw"><span class="glyphicon glyphicon-thumbs-down" style="vertical-align:middle; text-align: center"></span></button>
<button type="button" class="btn btn-default" style="font-size:3vw"> <span class="glyphicon glyphicon-tags"></span> </button>
</div>
So my question is: How to make this responsive, whatever is the size of the screen?
You have the button width set to style="width: 9%". So when the screen is smaller the button width will be 9% of the screen.
You can use the bootstrap classes to get your desired output without breaking the icons and buttons. Just use input instead of button and use type = button.
This is a sample code. Hope this helps.
<div class="form-group">
<label class="control-label" for="but1"></label>
<div class="input-group">
<span class="input-group-addon"><i class=glyphicon glyphicon-thumbs-up"></>
<input type="button" class="btn btn-default" id="but1" value="button" />
</div>
</div>
This will create the button with the icon and you can style them with CSS.
I am creating a site using Bootstrap. I have one header, which includes the sites logo, I then want on the right of the container a search bar, aligned vertically in the header. My second header then has my link navigation stretching across the container.
I am having trouble adding the search bar, I tried to add it into a ul and pull to the right but it just went below my logo and full width.
Here is a bootsnip
http://bootsnipp.com/snippets/d393M
The mark up i am using for my search is
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-info" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
Your link to the Bootsnip is not working so I can't look at it in more depth.
Try wrapping the search inside form tags as follows (this code from getbootstrap.com):
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Try surrounding your form in a form element and adding the .navbar-form class to it.
I have small buttons on either side of a input text box. It displays OK at desktop screen widths. But around 700 pixels all three objects wrap to separate rows. I've tried putting them into a row and column . That only made things worse; didn't display inline even at wide screen widths.
<div class="form-inline">
<div class="row">
<div class="col-xs-9">
<button id="mnBlue" type="button" class="btn btn-warning glyphicon glyphicon-arrow-down"></button>
<div class="form-group">
<label class="sr-only">Blue Quantity</label>
<input class="form-control" id="QuantityEdit_Blue" name="QuantityEdit.Blue" type="number" value="" />
<button id="plBlue" type="button" class="btn btn-success glyphicon glyphicon-arrow-up"></button>
</div>
</div>
</div>
</div>
<div class="form-group form-inline">
<label class="control-label">Quantity</label>
<div class="input-group">
<button id="mnRed" type="button" class="btn btn-warning glyphicon glyphicon-arrow-down"></button>
<input class="form-control" id="QuantityEdit_Red" name="QuantityEdit.Red" type="number" value="" />
<button id="plRed" type="button" class="btn btn-success glyphicon glyphicon-arrow-up"></button>
<span class="field-validation-valid text-danger" data-valmsg-for="QuantityEdit.Red" data-valmsg-replace="true"></span>
</div>
</div>
The top buttons and text box in the linked screen capture shows the display I'm trying to achieve on a mobile phone sized screen. The bottom shows what is happening at mobile screen widths.
Flickr: Example Screen Capture
I'm trying to implement a search bar on the footer using Bootstrap. The search bar appears to display properly when the window is maximized. However, when I try to resize the window to be smaller, the search form widens and the height of the bottom navbar appears to increase, as shown in the picture below:
What I want is for the navbar height to stay the same. The search bar should also not expand in length. Basically, even with a smaller window, the navbar should appear as follows:
The HTML code that I used to generate the bottom navbar is provided below:
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" name="gpsForm" placeholder="Latitude, Longitude">
<div class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</button>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Add
</button>
</div>
</div>
</form>
</div>
Any help would be greatly appreciated, as I'm fairly new to Bootstrap and web development in general and I've been stuck trying to look for a solution to this problem for several hours without any luck.
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<form role="form">
<div class="input-group">
<input type="text" class="form-control" name="gpsForm" placeholder="Latitude, Longitude">
<div class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</button>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Add
</button>
</div>
</div>
</form>
</div>
Working fiddle
http://jsfiddle.net/52VtD/9093/
Now you can add styling like padding and margin as you want :)
Try to remove "navbar-form" class from your form and try again.
Instead of this
form class="navbar-form navbar-left"
Try as
form class="navbar-left"