Home > other >  how to add vertical spacing after a breakpoint in bootstrap
how to add vertical spacing after a breakpoint in bootstrap

Time:12-30

when I surpass the breakpoint i need to add some vertical spacing but I don't know how to add it to the rows, I've tried to insert my-md-5 into the col class but it doesn't change

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>

  <section id="fauna" >
    <div >
      <h3 >La fauna del garda</h1>
    </div>
    <div >
      <div >
        <div >
          <div >
            <div >
              <h3 >Pesci</h3>
              <p >
              <h5>Il lago possiede una grande varietà di pesci, fra i più comuni abbiamo l'alosa, il luccio e il lavarello</h5>
              </p>
            </div>
          </div>
        </div>
        <div >
          <div >
            <div >
              <h3 >Volatili</h3>
              <p >
              <h5>Tuttavia il Garda all'interno del suo ecosistema include anche volatili, quali i gabbiani, folaghe, germani reali e nei dintorni delle spiagge, oltre a tordi, fringuelli, merli, pettirossi, cinciallegre e capinere</h5>
              </p>
            </div>
          </div>
        </div>
        <div >
          <div >
            <div >
              <h3 >Mammiferi</h3>
              <p >
              <h5>Invece nei dintorni del lago si trovano una moltitudine di animali selvatici molto vari tra i quali stambecchi e numerosi camosci e nelle zone boschive lepri, scoiattoli, donnole, volpi e marmotte</h5>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

</body>

</html>

CodePudding user response:

Use gap in this case gap-3 property like that:

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>


  <section id="fauna" >
    <div >
      <h3 >La fauna del garda</h1>
    </div>
    <div >
      <div >
        <div >
          <div >
            <div >
              <h3 >Pesci</h3>
              <p >
                <h5>Il lago possiede una grande varietà di pesci, fra i più comuni abbiamo l'alosa, il luccio e il lavarello</h5>
              </p>
            </div>
          </div>
        </div>
        <div >
          <div >
            <div >
              <h3 >Volatili</h3>
              <p >
                <h5>Tuttavia il Garda all'interno del suo ecosistema include anche volatili, quali i gabbiani, folaghe, germani reali e nei dintorni delle spiagge, oltre a tordi, fringuelli, merli, pettirossi, cinciallegre e capinere</h5>
              </p>
            </div>
          </div>
        </div>
        <div >
          <div >
            <div >
              <h3 >Mammiferi</h3>
              <p >
                <h5>Invece nei dintorni del lago si trovano una moltitudine di animali selvatici molto vari tra i quali stambecchi e numerosi camosci e nelle zone boschive lepri, scoiattoli, donnole, volpi e marmotte</h5>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>


</body>

</html>

CodePudding user response:

You can try this it works like you want:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section id="fauna" >
  <div >
    <h3 >La fauna del garda</h1>
  </div>
  <div >

    <div >

      <div >
        <div >
          <div >
            <div >
              <h3 >Pesci</h3>
              <p >Il lago possiede una grande varietà di pesci, fra i più comuni abbiamo l'alosa, il luccio e il lavarello</p>
            </div>
            <div >
            </div>
          </div>
        </div>
        <div >
          <div >
            <div >
              <h3 >Volatili</h3>
              <p >Tuttavia il Garda all'interno del suo ecosistema include anche volatili, quali i gabbiani, folaghe, germani reali e nei dintorni delle spiagge, oltre a tordi, fringuelli, merli, pettirossi, cinciallegre e capinere</p>
            </div>
            <div >
            </div>
          </div>
        </div>
        <div >
          <div >
            <div >
              <h3 >Mammiferi</h3>
              <p >Invece nei dintorni del lago si trovano una moltitudine di animali selvatici molto vari tra i quali stambecchi e numerosi camosci e nelle zone boschive lepri, scoiattoli, donnole, volpi e marmotte</p>
            </div>
            <div >
            </div>
          </div>
        </div>
      </div>

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

You can also watch at Codepen

I hope I've helped

  • Related