Problems in bootstrap responsiveness in inputs, Labels and selects

Asked

Viewed 172 times

1

I’m having trouble solving a simple responsiveness problem using bootstrap 4. My wish is when resize to celuar, the inputs, selects and Labels are superimposed and occupying all available width. As an example of "col-xs-12".

Here’s a code link that I’m using the bootply. It can be noted that when selecting for cell phone, and leaving narrower, it is possible to leave all overlapping and occupying all the available width. But it must be very narrow.

In the system where this is being applied, it is visualized differently.

redimensionalidade bootstrap sistema

The inputs, selects and Labels are not superimposed on each other. The blue and orange buttons are juxtaposed.

My wish is that when I resize to mobile, appear this way:

inserir a descrição da imagem aqui

And resizing to computer, appear this way:

inserir a descrição da imagem aqui

The second image, when resizing to computer, it continues to overlap, I put as an example of how I wish to do. The first image represents the minimum possible resizing, resembling cellular mode.

html twitter-bootstrap bootstrap-4 responsive

1 answer

1


Face the way you set up the grid is that it got really weird, do not use directly a col inside of another col, and you have to use the bracking point grid, like col-12 col-md-2, That means on canvas MD or more vc has 6 columns and on smaller screens that MD the column occupies the whole screen.

inserir a descrição da imagem aqui

Follow the image code above:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>

</style>
</head>

<body>

    <div class="container-fluid mt--7">
        <div class="card shadow" style="border-right:1px;border-color:dimgray;border-style:solid">
            <div class="card-header border-0">
                <form role="form" method="GET">
                    <div class="row">


                        <div class="col-12 col-md-2 text-center">
                            <label class="form-control-label" for="status-filter">status</label>
                            <select type="text" class="form-control" autocomplete="off" name="status_filter" id="status-filter" data-column="2" placeholder="status">
                                <option class="text-center" value="">Todas</option>
                                <option class="text-center" value="Aguardando">Aguardando</option>
                                <option class="text-center" value="Bem Sucedida">Bem Sucedidas</option>
                                <option class="text-center" value="Em Andamento">Em Andamento</option>
                                <option class="text-center" value="Recusada">Recusadas</option>
                            </select>
                        </div>



                        <div class="col-12 col-md-2 text-center">
                            <label class="form-control-label" for="temperature-filter">temperatura</label>
                            <select type="text" class="form-control" autocomplete="off" name="temperature_filter" id="temperature-filter" data-column="3" placeholder="temperatura">
                                <option class="text-center" value="">Todas</option>
                                <option class="text-center" value="Fria">Fria</option>
                                <option class="text-center" value="Morna">Morna</option>
                                <option class="text-center" value="Quente">Quente</option>
                            </select>
                        </div>




                        <div class="col-12 col-md-2 text-center">
                            <label class="form-control-label" for="city-filter">cidade</label>
                            <select type="text" class="form-control" autocomplete="off" name="city_filter" id="city-filter" data-column="5">
                                <option class="text-center" value="">Todas</option>

                            </select>
                        </div>



                        <div class="col-12 col-md-2 text-center">
                            <label class="form-control-label" for="client-filter">Recentes</label>
                            <select autocomplete="off" class="form-control" name="client_filter_cache" id="client-filter-cache" data-column="0" placeholder="recente">
                                <option class="text-center" value="">Todas</option>
                            </select>
                        </div>



                        <div class="col-12 col-md-2 text-center">
                            <label class="form-control-label" for="client-filter-all">clientes</label>

                            <input type="text" list="allClients" class="form-control" name="client_filter_all" id="client-filter-all">
                            <datalist id="allClients">

                                <option id="allProspects" class="text-center">nome</option>

                            </datalist>
                        </div>



                        <div class="col-12 col-md-2 text-center">
                            <label class="form-control-label " for="clear-filter">Filtros</label>
                            <button type="submit" class="btn btn-info form-control reset"> <span class="pull-right fa fa-search text-white"></span></button>
                            <button type="reset" class="btn btn-warning form-control"> <span class="pull-right fa fa-redo text-white"></span> LIMPAR FILTROS </button>
                        </div>


                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

  • It worked, it worked. Thank you very much!!!

  • @Arthurabitante No problem my dear, after a general look at the BS Grid documentation, it will help you ;) https://getbootstrap.com/docs/4.0/layout/grid/

  • 1

    I had previously tried something similar, I was on my way to adjust it. But a simple detail that left me with a lot of doubt. Thank you very much, it helped a lot!!!

Browser other questions tagged html twitter-bootstrap bootstrap-4 responsive

You are not signed in. Login or sign up in order to post.