Alphabetus/index.html

## index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap Grid</title>

    <!-- bs call -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  </head>


  <body class="bg-dark text-light">

    <!-- header -->
    <!-- this is a row with margin-0 padding-0 || rows cant be directly children of rows || rows have 12 slots each col can fill from auto(>=1) to 12 -->
    <section class="row m-0 p-0">

      <!-- this is a col || cols have breakpoints.
      they can be col-1 or col-md-1. md class is called on MD resolution and so on so on.
      => col[none], col-sm, col-md, col-lg, col-xl
      sizing classes (col-1, col-md-1) can be APPENDED.
      they react responsively FROM BOTTOM TO TOP! so... mobile first.


      below you can see we have 2 inner cols with 6 spots each,
      on any resolution as i am not spanning multiple sizing classes
      -->
      <div class="col-6 m-0 p-0">
        <h3>Pokedex</h3>
      </div>

      <div class="col-6 m-0 p-0">

        <!-- form for search input -->
        <form class="text-right w-100 m-0 p-0">

          <div class="row m-0 p-0 justify-content-end">
            <div class="input-group text-right w-50">
              <input type="text" name="q" placeholder="search..." class="form-control">

              <div class="input-group-append">
                <a href="#" class="btn btn-outline-secondary">
                  O
                </a>
              </div>
            </div>
          </div>
          <!-- /form for search input -->

        </form>
      </div>

    </section>
    <!-- /header -->

    <!-- NOTE:
          The content area only has example fields...
          The loop functions you create to populate DOM content
          should reflect BS classes etc...

          Just like a normal .css sheet bro
          All you have to know is a bunch of class names.
          They are all as semantic as they can.
          ez pz
    -->

    <!-- main section -->
    <!-- lets give the main row a special class.. 'justify-content-center' guess what it will do -->
    <section class="row m-0 p-0 p-sm-3 h-100 justify-content-center">


      <!-- lets play with breakpoints... 1 different sizing per breakpoint
          NOTE:
            By using BS sizing you are saying: While SUM of sizing is BELOW 12, elements are INLINE, else THEY ARE BLOCK
            so... they jump down.

            IF it is less than 12 => same line
            ELSE => new line

            on the example below you have SINGLE FIELD PER ROW until breakpoint XL.
            On XL ONLY, you have 2 FIELDS PER ROW. 6+6 = 12.

            Then we are adding the normal styling with m-0 p-0.
            but now since we have 2 fields on XL breakpoint lets give some padding
            on that breakpoint only.

            Padding, margin etc sizing are based on 'rem' (if im not mistaken! double check this)

            so we can say m-0 => margin: 0; or m-5 => margin: Xrem;

            In this particular case we gonna say:
            p-0 p-xl-3

            This will give padding 0 on all resolutions UNTIL xl. Here we give padding Xrem because we
            have 2 fields and it will look better with a small padding..

            Add nested rows & cols to achieve the desired level of detail.
            NEVER nest rows directly BUT you CAN and SHOULD nest cols directly.

            To nest rows do:
            <row>
              <col>
                <innerRow>
                  {...}
                </innerRow
              </col>
            </row>
      -->

      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
        Pokemon A
      </div>

      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
        Pokemon B
      </div>

      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
        Pokemon C
      </div>

      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
        Pokemon D
      </div>

      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
        Pokemon E
      </div>

      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
        Pokemon F
      </div>

      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
        Pokemon G
      </div>

      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
        Pokemon H
      </div>

    </section>
    <!-- / main section -->

    <!-- script call -->
    <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>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>Bootstrap Grid</title>

	<!-- bs call -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
	</head>


	<body class="bg-dark text-light">

	<!-- header -->
	<!-- this is a row with margin-0 padding-0 \|\| rows cant be directly children of rows \|\| rows have 12 slots each col can fill from auto(>=1) to 12 -->
	<section class="row m-0 p-0">

	<!-- this is a col \|\| cols have breakpoints.
	they can be col-1 or col-md-1. md class is called on MD resolution and so on so on.
	=> col[none], col-sm, col-md, col-lg, col-xl
	sizing classes (col-1, col-md-1) can be APPENDED.
	they react responsively FROM BOTTOM TO TOP! so... mobile first.


	below you can see we have 2 inner cols with 6 spots each,
	on any resolution as i am not spanning multiple sizing classes
	-->
	<div class="col-6 m-0 p-0">
	<h3>Pokedex</h3>
	</div>

	<div class="col-6 m-0 p-0">

	<!-- form for search input -->
	<form class="text-right w-100 m-0 p-0">

	<div class="row m-0 p-0 justify-content-end">
	<div class="input-group text-right w-50">
	<input type="text" name="q" placeholder="search..." class="form-control">

	<div class="input-group-append">
	<a href="#" class="btn btn-outline-secondary">
	O
	</a>
	</div>
	</div>
	</div>
	<!-- /form for search input -->

	</form>
	</div>

	</section>
	<!-- /header -->

	<!-- NOTE:
	The content area only has example fields...
	The loop functions you create to populate DOM content
	should reflect BS classes etc...

	Just like a normal .css sheet bro
	All you have to know is a bunch of class names.
	They are all as semantic as they can.
	ez pz
	-->

	<!-- main section -->
	<!-- lets give the main row a special class.. 'justify-content-center' guess what it will do -->
	<section class="row m-0 p-0 p-sm-3 h-100 justify-content-center">


	<!-- lets play with breakpoints... 1 different sizing per breakpoint
	NOTE:
	By using BS sizing you are saying: While SUM of sizing is BELOW 12, elements are INLINE, else THEY ARE BLOCK
	so... they jump down.

	IF it is less than 12 => same line
	ELSE => new line

	on the example below you have SINGLE FIELD PER ROW until breakpoint XL.
	On XL ONLY, you have 2 FIELDS PER ROW. 6+6 = 12.

	Then we are adding the normal styling with m-0 p-0.
	but now since we have 2 fields on XL breakpoint lets give some padding
	on that breakpoint only.

	Padding, margin etc sizing are based on 'rem' (if im not mistaken! double check this)

	so we can say m-0 => margin: 0; or m-5 => margin: Xrem;

	In this particular case we gonna say:
	p-0 p-xl-3

	This will give padding 0 on all resolutions UNTIL xl. Here we give padding Xrem because we
	have 2 fields and it will look better with a small padding..

	Add nested rows & cols to achieve the desired level of detail.
	NEVER nest rows directly BUT you CAN and SHOULD nest cols directly.

	To nest rows do:
	<row>
	<col>
	<innerRow>
	{...}
	</innerRow
	</col>
	</row>
	-->

	<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
	Pokemon A
	</div>

	<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
	Pokemon B
	</div>

	<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
	Pokemon C
	</div>

	<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
	Pokemon D
	</div>

	<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
	Pokemon E
	</div>

	<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
	Pokemon F
	</div>

	<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
	Pokemon G
	</div>

	<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-6 m-0 p-0 p-xl-3 mt-1 text-center border rounded shadow">
	Pokemon H
	</div>

	</section>
	<!-- / main section -->

	<!-- script call -->
	<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>
	</body>
	</html>