CSS: put search button inline to input when pull-left and pull-right don't work

bootstrap
bootstrap 4 pull-right
bootstrap grid
bootstrap 4 pull-right not working
bootstrap container-fluid
font awesome icons
bootstrap breakpoints
bootstrap 5

I need to put the Search Button next to the Search Input, that is a list of options.

I've search and most of the answers say I need to use pull-left and pull-right classes but it is nor working in my case.

Here is the Codepen:

https://codepen.io/ogonzales/pen/rNNVOBr

Complete PageCode:

https://codepen.io/ogonzales/pen/rNNVOBr

CodePen using diplay:flex:

https://codepen.io/ogonzales/pen/ExxjVqa

Original HTML:

<div class="row margin-top3 margin-bottom5 ">

        <form method="get" action="{% url 'shop:catalogo' %}">
            <div style="display: inline;">
            <div class="input-group pull-left">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="inputGroupSelect01">Categorías</label>
                    <select class="custom-select" searchable="Search here.." value={{filtro}} name="filtro">
                        <option value="todas" disabled selected>Seleccionar categoría</option>
                        <option value="todas">Todas</option>
                        <option value="celulares">Celulares</option>
                        <option value="programacion">Programación</option>
                    </select>
                </div>
            </div>
            <div class="input-group-append pull-right">
                <p><input class="btn btn-outline-secondary" type="submit" name="buscar" value="Buscar" /></p>
            </div>
        </div>
            <!-- <p class="margin-top5">Ordenado por: <input class="disabled" type="text" value={{orderby}} name="orderby" /></p> -->
        </form>

</div>

UPDATE:

Heigh is increased:


You don't need to use pull-left or pull-right. You have to simply put <div class="input-group-append"> inside <div class="input-group"> as it says in the official documentation.

<div class="row margin-top5 margin-bottom5 ">
    <form method="get" action="{% url 'shop:catalogo' %}">
        <div class="input-group">
            <div class="input-group-prepend">
                <label class="input-group-text" for="inputGroupSelect01">Categorías</label>
            </div>
            <select class="custom-select" searchable="Search here.." value={{filtro}} name="filtro">
                <option value="todas" disabled selected>Seleccionar categoría</option>
                <option value="todas">Todas</option>
                <option value="celulares">Celulares</option>
                <option value="programacion">Programación</option>
            </select>
            <div class="input-group-append">
                <input class="btn btn-outline-secondary mb-0" type="submit" name="buscar" value="Buscar" />
            </div>
        </div>
    </form>
</div>

Let me know if this helped.

CSS · Bootstrap, Bootstrap makes use of certain HTML elements and CSS properties that require To ensure proper rendering and touch zooming, add the viewport meta tag to your <head> . Overall, we don't recommend this on every site, so use caution! our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes. 3/14 [resolved] Add the class . Judy about 6 years ago . I hear what you mean Tomcat. It's probably best to get new coders comfortable with the terminology of elements, tags and attributes. class is an attribute of the ul element and there are plenty of other attributes that an HTML element can have.


It is better to use display:flex instead of float's because they are more predictable. In your case it will be something like this CodePen. I assumed that you are using Bootstrap 4.

On the other hand, you shouldn't put display:inline to wrap other elements because they are not meant to be a wrappers. You can find more here.

Migrating to v4 · Bootstrap, To make a custom check inline, add .custom-control-inline . Instead of [data-​toggle="buttons"] { } for style and behavior, we use the data attribute just for JS Added dozens of new utility classes for common CSS property-value pairs and .pull-left and .pull-right since they're redundant to .float-left and .float-right . Type:. Definition and Usage. The right property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements. If position: absolute; or position: fixed; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor.


Consider using CSS grid, you're kind of reinventing the wheel here.

CSS

.container{
  width: 200px;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
}

HTML

<div class="container">
  <div class='label'>Select</div>
  <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
  <button>Search</button>
</div>

.pull-left and .pull-right classes in Bootstrap 4, These utility classes are used to float an element to the left or right on the various viewport sizes based on the Bootstrap Grid. It works using the CSS float property. Even though I can't imagine this question hasn't been asked before, I couldn't find anything upon a search. I simply want to center a submit button. I think I tried everything I can imagine. Any suggestion? If you don't mind I just post CSS and html of the form.


Font Awesome Examples, Font Awesome icons work great in buttons. You can even combine them with larger icon styles, pull-right and pull-left , and icon-spin . <a class="btn" href="#"> <i  It is important to note that we are using Bootstrap 4 here, in Bootstrap 3 or Bootstrap 2 we can use the helper classes like pull-left, pull-right to align the elements to the left or right accordingly.


CSS · Bootstrap 3.3.6 Documentation, You can find docs for all previous Bootstrap versions at BootstrapDocs. To ensure proper rendering and touch zooming, add the viewport meta tag to your <​head> . at responsive breakpoints, you may need to reset offsets, pushes, or pulls. </div> <button type="submit" class="btn btn-default">Submit</button> </​form>  We can float an element in our layout by using the classes .pull-left and .pull-right, creating a left float or right float respectively. The most common problem with floating behavior is the fact that the parent container no longer knows what the dimensions of its content are.


Textbox and button in same line bootstrap, I'm pulling my hair out trying to align a Bootstrap 4 Custom-CheckBox in my of the elements are inline, left aligned and labels are alongside, add the class . Bootstrap example of Buttons minus and plus in input using HTML, Javascript, input, . By pure CSS, we can make a better style to the textbox, textarea, dropdown  Do not use pull-right and pull-left for button alignment. If you are using the class .pull-right or .pull-left , you are actually using the wrong class of bootstrap to align the button. Because these classes may break your design and overlap and float elements with other HTML elements.