Bootstrap not working

Bootstrap not working
0.0 0

#1

I’ve just got all the functionality working in my local weather project - and now I can’t put a button where I want it to go.

Bootstrap is loaded in my pen, all elements are nested in a ‘container-fluid’ element yet I can’t get 2 elements to go side-by-side.

Here is my weather project pen. There is a button under the temperature element. I want that button to be beside the temperature.

Can anyone see the problem?

Thanks


#2

Give temp and tempButton display property of inline-block.

You may want to round to fewer decimal places, as an aside.


#3

Thanks @icartusacrimea

Do you mean this?

#tempButton{
    display:inline-block;
}

I will try but would also love to know why bootstrap isn’t working.


#4

Bootstrap isn’t magic. You have to actually use the grid system. https://getbootstrap.com/css/
But yes, to get those two elements on the same line, you could also just add display: inline-block to both p id temp and button id tempButton.


#5

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

Your app looks great :thumbsup:


#6

@PortableStick: I agree, your app looks great! I like the changes you made since yesterday.