Bootstrap

layout

  • using bootstrap will make you have a lot of classes in tags which is called class bloat

  • On pc, two columns, on mobile, 1 colum

1
2
3
4
<div class="row">
  <div class="col-xl-6 col-sm-12">50% desktop, 100% mobile</div>
  <div class="col-xl-6 col-sm-12">50% desktop, 100% mobile</div>
</div>

actually you can delete col-sm-12 ,cause everything else is defaulted to 100 percent.

xl-> pc

sm-> phone

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- Modify the HTML below to make the blue boxes behave like the red ones. -->
<div class="row">
  <div class="col-xl-6 col-sm-12 col-8">Column 1</div>
  <div class="col-xl-3 col-sm-6 col-8">Column 2</div>
  <div class="col-xl-3 col-sm-6 col-8">Column 3</div>
</div>
    




      <div class="container">
        <div class="row">
          <div class=" col-lg-3 col-sm-12">
            <img src="images/bizinsider.png" height="30">
          </div>
          <div class="col-lg-3 col-sm-12 ">
            <img src="images/mashable.png" height="30">
          </div>
          <div class=" col-lg-3 col-sm-12">

            <img src="images/techcrunch.png" height="30">
          </div>
          <div class=" col-lg-3 col-sm-12">
            <img src="images/tnw.png" height="30">
          </div>
        </div>
  • notice:
    1. must have

Components

  • css:

    utilities.scss -> custom styling

    features.css -> custom css

Spacing:

mt-5 : margin-top 5

my-3: margin- top and bottom

mb-2: margin-bottom -size 2

Dark Mode

1
2
<!doctype html>
<html lang="en" data-bs-theme="dark">