Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Konrad Pilch
2,435 PointsBootstrap Form with glyphicon mobile problem
HI, I have a problem when i resize my window to mobile view, my form search bar , with glyphicon that looks like this :
<!-- Search Navbar -->
<form class="navbar-form navbar-right" role="search" id="searchNavbar">
<div class="form-group">
<input type="text" class="form-control" placeholder="I'am searching for...">
</div><!-- /form-group -->
<button type="submit" class="btn btn-default glyphicon glyphicon-search pull-right"></button>
</form>
When i resize it to mobile, the glyphicon( the search button) goes out of inline . I tried many things but nothing works .
1 Answer
Jim van Rijsewijk
8,150 PointsHi Konrad,
You should use input group
<form class="navbar-form navbar-right" id="searchNavbar" name=
"searchNavbar">
<div class="input-group">
<input class="form-control" placeholder="I'am searching for..."
type="text"> <span class="input-group-btn"><button class=
"btn btn-default glyphicon glyphicon-search" type=
"submit"><span class="input-group-btn"></span></button></span>
</div><!-- /form-group -->
</form>
More info about this subject: boostrap
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsThank you , didn't know that ! ^^