Elements are not well responsive and functional in bootstrap

Question

Elements are not well responsive and functional in bootstrap

Asked 5 years, 9 months ago

Viewed 41 times

0

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="stylesheet" href="/static/scrapy/style.css">

<div class="container w-50">
    <h1 class="display-4">Scrapy Data</h1>
    <!-- List group -->
    <div class="col-8 mx-auto my-5 py-5" id="Group">
        <div class="list-group">
                <div>
                    <a id="Tipos-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseTipos" role="button" aria-expanded="true" aria-controls="collapseTipos">
                        <div class="d-flex align-items-center">
                            <span>Tipos</span>
                            <div id="spinnerTipos" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>                           
                            <a class="btn btn-block btn-outline-success collapse" id="collapseTipos" data-parent="#Group" role="button" href="/scrapy/scrapy-tipos" onclick="disableLinks(); showSpinners('#spinnerTipos');">Scrapy</a>

                    </a>
                </div>







                <div>
                    <a id="Habilidades-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseHabilidades" role="button" aria-expanded="true" aria-controls="collapseHabilidades">
                        <div class="d-flex align-items-center">
                            <span>Habilidades</span>
                            <div id="spinnerHabilidades" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <a class="btn btn-block btn-outline-success collapse" id="collapseHabilidades" data-parent="#Group" role="button" href="/scrapy/scrapy-habilidades" onclick="disableLinks(); showSpinners('#spinnerHabilidades');">Scrapy</a>

                    </a>
                </div>







                <div>
                    <a id="Categorias-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseCategorias" role="button" aria-expanded="true" aria-controls="collapseCategorias">
                        <div class="d-flex align-items-center">
                            <span>Categorias</span>
                            <div id="spinnerCategorias" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <a class="btn btn-block btn-outline-success collapse" id="collapseCategorias" data-parent="#Group" role="button" href="/scrapy/scrapy-categorias" onclick="disableLinks(); showSpinners('#spinnerCategorias');">Scrapy</a>

                    </a>
                </div>







                <div>
                    <a id="Pokemons-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapsePokemons" role="button" aria-expanded="true" aria-controls="collapsePokemons">
                        <div class="d-flex align-items-center">
                            <span>Pokemons</span>
                            <div id="spinnerPokemons" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <form class="form-inline collapse" action="index.html" method="post" id="collapsePokemons" data-parent="#Group">
                                <div class="ml-2 mt-2 form-group">
                                    <input type="text" name="idpoke" class="form-control" placeholder="Id do 1° pokémon ">
                                </div>
                                <button type="submit" class="ml-4 px-4 btn btn-outline-success" role="button" onclick="disableLinks(); showSpinners('#spinnerPokemons');">Scrapy</button>
                            </form>

                    </a>
                </div>


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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<script type="text/javascript">
    function disableLinks() {
        $("a").addClass("disabled");
    }
    function showSpinners(arg){
        $(arg).collapse()
        $("a").collapse('hide')
    }
</script>

That’s part of the code. I am using these spinners that appear whenever I press the scrapy button, but they are not responsive when I use on smaller screens. Any hints?

Guy would be nice if you post the code the way it is rendered in the Browser, not the raw code. Go to Chrome press Ctrl+U and take the HTML of the component and paste here, will make it easy to answer you, reference puts the CSS you used tb

– hugocsl

2019/03/10 at 21:01
ready edited the question and already has the code

– CAIO WANDERLEY

2019/03/10 at 22:14

1 answer

Browser other questions tagged html css twitter-bootstrap django bootstrap-4

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

by hugocsl • **65,517** points · Answer 1 · 2019-03-10T22:27:58+00:00

Guy basically what happens is you put your container with class w-50 and did not use a Row to separate their content groups.

What I did was remove class w-50 from container and separate the title and the btns in rows distinct. Now it’s okay. If you want the btns are narrower just exchange in div <div class="col-8 mx-auto my-2 py-5" id="Group"> that col-8 for col-6 for example.

function disableLinks() {
  $("a").addClass("disabled");
}

function showSpinners(arg) {
  $(arg).collapse()
  $("a").collapse('hide')
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous">
  <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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

  <div class="container ">
    <div class="row">
      <h1 class="display-4 mx-auto">Scrapy Data</h1>
    </div>
    <div class="row">
      <!-- List group -->
      <div class="col-8 mx-auto my-2 py-5" id="Group">
        <div class="list-group">
          <div>
            <a id="Tipos-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse"
              href="#collapseTipos" role="button" aria-expanded="true" aria-controls="collapseTipos">
              <div class="d-flex align-items-center">
                <span>Tipos</span>
                <div id="spinnerTipos" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status"
                  aria-hidden="true"></div>
              </div>
              <a class="btn btn-block btn-outline-success collapse" id="collapseTipos" data-parent="#Group" role="button"
                href="/scrapy/scrapy-tipos" onclick="disableLinks(); showSpinners('#spinnerTipos');">Scrapy</a>
            </a>
          </div>

          <div>
            <a id="Habilidades-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0"
              data-toggle="collapse" href="#collapseHabilidades" role="button" aria-expanded="true" aria-controls="collapseHabilidades">
              <div class="d-flex align-items-center">
                <span>Habilidades</span>
                <div id="spinnerHabilidades" class="collapse spinner-border spinner-border-sm text-success ml-auto"
                  role="status" aria-hidden="true"></div>
              </div>
              <a class="btn btn-block btn-outline-success collapse" id="collapseHabilidades" data-parent="#Group" role="button"
                href="/scrapy/scrapy-habilidades" onclick="disableLinks(); showSpinners('#spinnerHabilidades');">Scrapy</a>
            </a>
          </div>

          <div>
            <a id="Categorias-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse"
              href="#collapseCategorias" role="button" aria-expanded="true" aria-controls="collapseCategorias">
              <div class="d-flex align-items-center">
                <span>Categorias</span>
                <div id="spinnerCategorias" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status"
                  aria-hidden="true"></div>
              </div>
              <a class="btn btn-block btn-outline-success collapse" id="collapseCategorias" data-parent="#Group" role="button"
                href="/scrapy/scrapy-categorias" onclick="disableLinks(); showSpinners('#spinnerCategorias');">Scrapy</a>
            </a>
          </div>

          <div>
            <a id="Pokemons-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse"
              href="#collapsePokemons" role="button" aria-expanded="true" aria-controls="collapsePokemons">
              <div class="d-flex align-items-center">
                <span>Pokemons</span>
                <div id="spinnerPokemons" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status"
                  aria-hidden="true"></div>
              </div>
              <form class="form-inline collapse" action="index.html" method="post" id="collapsePokemons" data-parent="#Group">
                <div class="ml-2 mt-2 form-group">
                  <input type="text" name="idpoke" class="form-control" placeholder="Id do 1° pokémon ">
                </div>
                <button type="submit" class="ml-4 px-4 btn btn-outline-success" role="button" onclick="disableLinks(); showSpinners('#spinnerPokemons');">Scrapy</button>
              </form>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>