class="row" and class = "col"
This is the simple way of using a grid system in Bootstrap
This row has been divided into two columns, but how?
The above simply uses a
class="row" <div>, and inside
of
this, we have two
class="col" divs
Also included are some semantic terms for color:
bg-success
is
green, bg-warning is red, and bg-alert is yellow
If no number is included for a term like <div class="col
bg-alert">, then each column class within our row div will divide up the 12 units of
space that each row is allocated!
The above isn't exactly the prettiest! We can use numbering to spread out the 12 units of space allocated
for
each row among the columns
This element uses the class col-4
This uses col-3
col-2 is over here
And this is col-3 again
Responsive Grid
Both of these elements are 50-50! The class name is
<col-md-6> Basically, when
we include a number (X) we know we're allocated X/12ths of the space to this. However, what about
md?
Well, the use of md is all about breakpoints! As soon as
we
go below the 'medium' breakpoint (can you remember what that is?), the columns will adjust
themselves
responsively BACK into the full viewport width (unless some further trickery has been applied)
In the above, the columns begin STACKING once the screen size goes below the medium screen-width
breakpoint
.
Images and img-fluid
See how spaced out these are?
Set out like above, they use the class img-fluid. You can make it so that the images
start
stacking (rather than shrinking) below a certain breakpoint. Use the sm/md/lg tags to do so! Below, the
same
images will stack once the medium break point is breached!
The stacking is easy to achieve using <div class="col-md-4"<>/div<>/p<
One more thing...to get rid of the gutters, simply add the no-gutters class
to
the row...replaced in Bootstrap V5.0 by g-0. See this
for more, or spend time with the documentation!
Next up: alignment of images
One
of
us is in no way at all comparable to the other! We're using the align-items class
to try and vertically align our content! Essentially, align-items can be used to
line use things. The most frequently used is align-items:center; This was actually
used in this layout too!
See? If not, inspect it!
Notice how it uses class="row align-items-center". Where? Well, in the row where
each column is set up! See also: you can align individual items using align-self on the individual
column div! Bootstrap really simplifies the process of applying these Flexbox properties: read their
documentation on how to incorporate these things in your website design!
Justify Content
Here, we'll show you how to use align-items's arch-nemesis somewhat similar cousin, the
justify-content property. As you know, this property aligns items around the
main-axis - align-items aligns items *ahem* around the cross-axis
Things like justify-content-start, justify-content-end and justify-content-end are
just ways that Bootstrap allows us to incorporate regular Flexbox properties!
There are lots of variants on the above too! It's
possible to use something like col-md-4 so that the content stacks on the medium
breakpoint is breached! There's also properties like justify-content-lg-start or
justify-content-center which help redistribute space if you have the will!
