Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Matthew Whittington
Matthew Whittington
10,308 Points
Posted by Matthew Whittington
Matthew Whittington
10,308 Points

What would be the best way to create an inline form?

I wish to create an inline form above the navbar header in bootstrap would it be better to using inline block to display the form or just use another nav bar?

I have tried using inline block but my for keeps collapsing.

eck
eck
43,038 Points

Can we see a sample of your code? :D

eck
eck
43,038 Points

From what I see you already have the effect, your problem is that you navigation is not responsive, and possibly too much the phone number's container is too wide, so it pushes for form elements off the page. Maybe you should look into using a fluid grid?

3 Answers

eck
eck
43,038 Points
eck
eck
43,038 Points

Is your problem that when the screen gets small enough the form elements begin to stack over one another? Because that is the expected behaviour for none-fluid inline-blocks. Also for small screens you would not want your form to remain inline since there is limited horizontal space.

Also I added a vertical-align bottom to the submit button so that when the form is all in a single row the button lines up with the other inputs : https://jsfiddle.net/zbfspxoy/

eck
eck
43,038 Points
eck
eck
43,038 Points

Okay, here is another example. This time I am using fluid widths and floats instead of inline-block, but with tweaking you could also make it work for inline-block.

https://jsfiddle.net/cgbo00fc/4/

You can see the styles I added at the end of the CSS.

Matthew Whittington
Matthew Whittington
10,308 Points
Matthew Whittington
Matthew Whittington
10,308 Points

Is there any way to nudge it slightly to the right or would i have to use a fluid container for that?