tindog | Tinder clone website for dogs | Frontend Framework library

I am currently working with this code which is part of my Web development course from udemy

I define this property to h2 tag and it the text got overlap on each other. I applied padding of 7% to top and bottom and 15% to left and right to the section class.

I am learning bootstrap 5. so when I tried to edit the font-size of the navbar-brand. It kept the basic font-size and didn't work. further more if I try to add paddings to the navbar-brand it doesn't apply paddings on top or bottom.

I have a very straight forward HTML-CSS code. However, some CSS properties are being overridden. Here I have custom properties for the h1 tag, but upon inspecting, I see my defined properties are being overridden by some settings from _type.scss

When I uncheck font-family: inherit; my defined font-family value is used.

I am new to CSS, but I suspect this to be the case of CSS inheritance.

CSS File:

I am new to bootstrap and can't seem to figure out why the buttons don't work when clicked on. Both carousel items are there (confirmed by changing which is active). I have looked on the getbootstrap website and followed the code how it explains but there is no change. Could it be that I'm missing a link in the head that I could not find / am unaware of?

I am taking the lesson in bootstrap card, and I have followed the whole story from my teacher, but the grid markup effect could not work.

I thought I was incorrect for what I have input, but I realized I wasn't.

I suppose to create the first two containers with 50% in the PAD and the 3rd container with 100%.

I added in the first 2 container and for the 3rd.

What I inputted is entirely the same from the lesson, but it could not work nicely as a pricing table.

Please kindly advice what I suppose to do.

Please kindly to see what I have input below in my codeply https://www.codeply.com/p/uA7F2o9gyz

I want to make an icon, text in the different row by bootstrap4.

Guys, I am practising by bootstrap4 for beginner level; I am struggling; I could not make the icon in the centre in the first row and the subtitle by h3 in the second row.

I put text with h3 then add an icon by class, which affected the icon with the text in the same row. However, this is not what I want.

Again, I changed the other way round, so I created three columns by the grid, and I put the icon into the div together, but the effect is even worse.....the style by h3 and the button text in the 3rd row has lost the text style.

Please advise the solution so that I could clear the challenge.

Thanks and highly appreciated!

I published a website (a project of my online course) which have social media button at footer area. I linked these with href but when I publish it on github, instead of directing me to "www.twitter.com", it directs me to "...github.io/www.twitter.com". What is the best way to fix this?

My code looks like below;

My image is in a grid column. When I use Bootstrap 4 the.title-image { width: 60%;} works as expected.

However when switching to BS 5 it just pops out and enlarged. It's like the width is set to correspond with the body width, not with the image column container anymore.

The docs of Bootstrap 4.5 and 5 indicate that they both treat image with .img-fluid. max-width: 100%; and height: auto;)

source:

v5: https://getbootstrap.com/docs/4.5/content/images/

v4.5: https://getbootstrap.com/docs/5.0/content/images/

So the same specs, but why does width: 60%; behave differently?

CSS