Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
simple 100% bootstrap responsive grid template
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.