TRIGGERBLOCK: August 2021

Saturday, August 21, 2021

Bootstrap

Pre-Req:

downloadand install VSCode
Start with base html
https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template
Copy paste individual components from Bootstrap Document

Class :

Used to add extra features(like color , size etc)
classes + spaces = add new property to the element
<button type="button" class="btn btn-secondary btn-sm">Primary</button>

ID : Used to identify the component

Image

img src="https://source.unsplash.com/400x400/?code"
"https://source.unsplash.com/1200x300/?van"
If u have a file place in the same folder and img src="1.jpg"
Dont put components inside other components Eg:Button inside paragraph
Image Centering - <img src="..." class="rounded mx-auto d-block" alt="...">
https://getbootstrap.com/docs/4.0/content/images/

Image Background

 <head>
    <style>
        .page-holder {
            min-height: 100vh;
        }
        
        .bg-cover {
            background-size: cover !important;
        }
    </style>   
 </head>

<div style="background: url(https://i.postimg.cc/ZnHTP71s/aircraft-airplane-boat-1575833.jpg)" class="page-holder bg-cover">
        <div class="container py-5">
            <header class="text-center text-white py-5">
                <h1 class="display-4 font-weight-bold mb-4">Contact us</h1>
                <p class="lead mb-0">Address</p>
            </header>
        </div>
    </div>

django:

#make sure css is added

#file is inside static 

settings.py :

STATIC_URL = '/static/'
STATICFILES_DIRS = ( os.path.join('static'), )

<div style="background: url('{% static 'file_inside_static.jpeg'%}')" class="page-holder bg-cover">

Color

<button type="button" class="bg-danger">name</button>
bg-danger = Red
bg-warning = Yellow
bg-success = Green
bg-primary = blue
bg-light

text Color

<p class="text-white bg-dark">.text-white</p>
<p class="text-light">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
<p class="text-success">.text-success</p>

container

<div class="container"></div>
Bootstrap > Container > Grid
Bootstrap gives max of 12 columns in a row
If "col-3" = use 3 column to make 1 column out of 12 .So now user is left wtih 9 columns

Example :

<div class="col-2 bg-danger"> remaining 2 0f 2</div>

</div>

It can be configured for different mobile devices as well
if "col-md-10 col-sm-6" means in medium device use size 10 and small device use size 6

Margins , Spacing and Padding:

Create a new container
add "my-1" inside the class
U can give margins 1-4
my-l = left
<div class ="row gx-5"> = horizontal gutters
<div class ="row gy-5"> = vertical gutter
<div class ="row g-5"> =horz+vert gutter

<div class="container">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">

<div class ="row px-5"> =padding
https://getbootstrap.com/docs/5.1/utilities/vertical-align/
https://getbootstrap.com/docs/5.1/utilities/spacing/
https://getbootstrap.com/docs/5.1/utilities/position/

Using Examples (https://getbootstrap.com/docs/5.1/examples/):

goto Examples in Bootstrap
open any Example
Inspect the element in Browser
Add a new container in the html
Paste the element inside the container

Centering

add following to class "d-flex jusify-content-center align-items-center"

Sequencing:

add this to class "order-md-1" /"order-md-2"

Linking html files :

href="about.hml"

Login Box (Modal):

Pops up a message box on click on of the button
https://getbootstrap.com/docs/5.1/components/modal/#static-backdrop

ThumbNail

https://stackoverflow.com/a/8858052