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

HTML

Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Bootstrap 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
Jim van Rijsewijk
8,150 Points

Hi 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
Konrad Pilch
2,435 Points

Thank you , didn't know that ! ^^