Bootstrap layout help

1

I am having some problems with the following pen.

I am uing two “row” classes but having the following problems setting up my layout for the calculator challenge:

  1. The first row should take the text area across the entire length of the screen but it is only covering part of it. By using col-xs-12 in the class I thought it would do this,

  2. I am trying to get the four buttons all next to each other(underneath the text-area), but they are stacking. My understanding was that by using the four “col-xs-3” within the “row” class it should have put them next to each other.

Any help would be great.

2

I cant help much, but if i had a guess it would be something todo with a block level html tag and you want the buttons to inline.

some css to change it to inline-block.
search mdn inline-block.
I hope this makes sense to you.

3

Thanks, I will have a look into this

4

i have added bootstrap v3 to the head of the html and added a class of button the get the buttons to be inline-block here is a link.

pen

1 Like
5

Thanks @sypher85 for the example.

By looking at your code I realised the mistake I had made. I had not added bootstrap to my css tab settings in codepen. I had acciedntally added bootstrap to my javascript tab settings. I added bootstrap and the layout is now working.

Thanks again for your help

1 Like
6

thats ok, im glad I could help in some way.

7

Both issues are caused by the same thing: you’re missing bootstrap in your CSS settings.

You have it in the JS settings, but now in the CSS settings. As soon as I added it, everything snapped into place.

EDIT: Doh! Somehow, I didn’t see the lower replies… didn’t read far enough. :stuck_out_tongue:
Glad you sorted it.