H, I have a question how can i know that there is proper margin between two section ? is it by preview only or is there any specific height or rule which I can follow to make other sections
Great question! When arranging sections on a webpage, it's important to have the right spacing between them. Bootstrap, has a simple system for this. It offers five levels of spacing, from 0 (no space) to 5 (a large space). These are measured in 'REM', a unit of size. To make it easier for you, especially if you're using a design tool like Figma, you can convert these REM values to pixels. By default, 1 REM equals 16 pixels. This is known as the 'base size'. So, if you want to know how big a space is in pixels, just multiply the REM number by 16. Side note, there are REM converters online, I use them all the time. Here's the basic sizes Bootstrap comes with: Level 0: 0px (no space) -- Ignore this, no one uses this LOL Level 1: 4px (0.25 REM) Level 2: 8px (0.5 REM) Level 3: 16px (1 REM) Level 4: 24px (1.5 REM) Level 5: 48px (3 REM) This way, you can easily figure out the exact spacing you need in Figma. Just choose a level, convert the REM to pixels, and apply it to your design. It's like picking the thickness of a cushion between your sections - from very thin to quite thick, or none at all!
H, I have a question how can i know that there is proper margin between two section ? is it by preview only or is there any specific height or rule which I can follow to make other sections
Great question! When arranging sections on a webpage, it's important to have the right spacing between them. Bootstrap, has a simple system for this. It offers five levels of spacing, from 0 (no space) to 5 (a large space). These are measured in 'REM', a unit of size.
To make it easier for you, especially if you're using a design tool like Figma, you can convert these REM values to pixels. By default, 1 REM equals 16 pixels. This is known as the 'base size'. So, if you want to know how big a space is in pixels, just multiply the REM number by 16. Side note, there are REM converters online, I use them all the time.
Here's the basic sizes Bootstrap comes with:
Level 0: 0px (no space) -- Ignore this, no one uses this LOL
Level 1: 4px (0.25 REM)
Level 2: 8px (0.5 REM)
Level 3: 16px (1 REM)
Level 4: 24px (1.5 REM)
Level 5: 48px (3 REM)
This way, you can easily figure out the exact spacing you need in Figma. Just choose a level, convert the REM to pixels, and apply it to your design. It's like picking the thickness of a cushion between your sections - from very thin to quite thick, or none at all!
@@JCBCB thank you 🤩
I just finished building my footer on my portfolio site, its not pretty.
Nice one on finishing your footer! It might not be the prettiest, but hey, it's all about the functionality, right? Keep up the good work!