Make a Website (Building with Bootstrap)


#1

Good day guys , i have an enquiry regarding Exercise 4 of Make a Website (Building with Bootstrap).
I would appreciate your help alot.

Here is the link : https://www.codecademy.com/courses/make-a-website/lessons/bootstrap/exercises/header-nav?action=resume_content_item

image


#2

bootstrap is a css framework, it comes with a lot of css classes (like .container and .row) which we can add to html to build our website faster. For example container ensures the context is centered when screen becomes large enough (i think 1000px or 1200px)

similar, row is critical for the grid system to work. Allowing us to build the layout of our page more rapidly, given all this css classes are already defined for us.

as for question 3, no. here is the documentation for bootstrap 4 on this matter:

https://getbootstrap.com/docs/4.1/layout/grid/

but i think the course still uses bootstrap 3. Anyway, the grid system in bootstrap means a row can have 12 columns, so if you have 8 columns, you still have 4 columns left within that row. It doesn’t say anything about the number of elements you can have in your column.


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.


#4

#5

Good day stetim94,thank you for your prompt assistance. In order to further aid and deepen my understanding of Bootstrap , i had actually stumbled across this link in the article that you had linked me:
image
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

I’m a little puzzled regarding this section


Before
image
After
image

QUESTION: It was mentioned that “the items do not stretch on the main dimension”
. However from what i am seeing after editing the 3rd item, the item had stretched along the row (default main dimension)?


#6

The items do not stretch beyond what their content forces them out to. In other words, they are inline-blocks with width: auto, I suspect.

If there are more items than can fit in the container, they will not wrap but will instead overflow. If some items are taller than others, all items will stretch along the cross axis to fill its full size.

flex_overflow

Above shows what is meant by overflow. Add a property to your box class…

    .box {
            display: flex;
            overflow: scroll;
          }

and see what happens.


#7

Thank you mtf, your explanation has enlightened me. Do allow me to put what i understood from your revert into my perceived layman terms (just for reference in future), feel free to let me know if i’m wrong.

If i add in overflow property…
I notice that i’d need to scroll along the main dimension to access the rest of the items that are outside of the container’s size, however there wasn’t any scrolling needed for the cross axis.
image

Without taking an overflow property into consideration(Conclusion):

Items on the main dimension will :heart:overflow out of the container’s size and not stretch by the main dimension to fit in the items :heart: , whereas on the cross axis items will :heart:stretch by the cross axis to fit in the items and not overflow out of the container’s size :heart:
image


#8

In the main, we are not limited by height, but by width. There is no limit to how long a web page can be, hence FLEX allows vertical stretching by default. If we do limit the height of the container, then overflow will occur.


#9

Question: In this case, shouldn’t item 3 be one-third the size of item 2?


#10

Link us back to that so we can see it in action.


#11

#12

Only if it doesn’t compromise content, would be my interpretation. Grow and shrink are factors than can only be imposed in some realistic proportion relative to the display and according to the element’s minimum size.


#13

Noted.

The initial value of this flex-basis is auto – in this case the browser looks to see if the items have a size.

If the items don’t have a size then the content’s size is used as the flex-basis.

The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent that flex-grow in behaviour.


#14

Link to Source:


Question 1: i would require some help to further explain “grid breakpoints” in layman terms.
I understand that a grid breakpoint is the range of predetermined screen sizes that have specific layout requirements.Does this mean that :

  • When the predetermined screen size is less than 576px (Extra small) , there shall be no maximum container width and hence no changes will be made to the specified layout

  • When the predetermined screen size is more than 576px (Small) , maximum container width is 540px. If container width goes beyond 540px, changes will be made to the specified layout.

  • When the predetermined screen size is more than 768px (Medium) , maximum container width is 720px. If container width goes beyond 720px, changes will be made to the specified layout.

  • When the predetermined screen size is more than 992px (Large) , maximum container width is 960px. If container width goes beyond 960px, changes will be made to the specified layout.

  • When the predetermined screen size is more than 1200px (Extra large) , maximum container width is 1140px. If container width goes beyond 1140px, changes will be made to the specified layout.

Question 2: What is the difference between predetermined screen size, container width, and viewport width?

Question 3: I don’t quite understand the phrasing of the following sentence, does it mean that because using pixels for the viewport width, grid breakpoint and container widths will not change the font size, hence pixels was used instead of other measurements such as ems or rems?

“…pxs are used for grid breakpoint and container widths. This is because the viewport width is in pixels and does not change with the font size.”


#15

i think you need to read this:

https://getbootstrap.com/docs/4.1/layout/overview/

It explains containers (which is something belonging to bootstrap)

Then we can go on to answer the rest of the questions