html - Bootstrap Center Form & Logo like Responsive Search Engine -
What would be the best way of a logo and form in the middle of the page when responsive?
Currently, I have something like
& lt; Div class = "container" & gt; & Lt; Img src = "logo.jpg" class = "logo img-responsive center-block" & gt; & Lt; Form role = "form" & gt; & Lt; Div class = "form-group center-block" & gt; & Lt; Div class = "input-group" & gt; & Lt; Input type = "text" class = "form-control" placeholder = "search" & gt; & Lt; Span class = "input-group-btn" & gt; & Lt; Button class = "btn btn-default btn-sm" type = "submit" & gt; & Lt; Span class = "glyphicon glyphine-search" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Form & gt; & Lt; / Div & gt;
Then I edit it slightly in CSS;
.form-group {margin-top: 15px; Width: 50%} .logo {width: 300px; }
However, now the logo will not shape the size of the input box.
Now you will need to change the size of the calls for each media, which will give you access to XS SM MD and LG But this will do the trick you want.
& lt; Div class = "container-fluid" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-md-6 col-md-offset-3" & gt; & Lt; Img src = "http://placehold.it/250x300" class = "logo image-responsive center-block" /> & Lt; Form role = "form" & gt; & Lt; Div class = "form-group center-block" & gt; & Lt; Div class = "input-group" & gt; & Lt; Input type = "text" class = "form-control" placeholder = "search" /> & Lt; Span class = "input-group-btn" & gt; & Lt; Button class = "btn btn-default btn-sm" type = "submit" & gt; & Lt; Span class = "glyphicon glyphine-search" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Form & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;
I assume that you need a liquid container, the offset will take time, and to check for further reading
Comments
Post a Comment