What's wrong with my Bootstrap code?

What's wrong with my Bootstrap code?
0

#1

The Wikipedia project I can’t center my search bar…I can’t found the problem.so annoying.

Here is my code pen.


#2

I think the best practice is to separate your code into a more understandable one. With your pen,i must say is really messy.

I will try my hands on your code and give you feed back when i am able to solve it.

In the mean time i think you should do more research and lets battle this centre the object war together.

Good luck :smile:


#3

Hey, your problem.so is for sale.

As for your actual issue, first of all keep your CSS in the CSS Panel and remove any html\head\body tag from your HTML panel (they are not needed in Codepen, you can load your scripts from the pen settings). You have 3 Bootstrap versions loaded (counting the one in the HTML panel), keep one (version 4 will be fine).

Then, if you want to center your search-bar there are different options. Two of them are:

You could remove the -inline part from your <form> tag’s class and that would make the search-bar stretch horizontally.

Or, you can make use of the Boostrap flexbox classes, like so:

<form class="form-inline d-flex justify-content-center">

#4

A simple way is to add

SOLUTION :slight_smile:


#6

You can create a DIV container or tag and make “display:block; margin: 0 auto;” :slight_smile:


#7

Thank you, I think I really need some advice.
I feel don’t know how to improve. The only thing I can do is “don’t give up”.


#8

I will be more than happy to build something with you on this project.

How about lets bring up ideas first ?


#9

I did all of those, it’s really necessary advice, I will be more careful. Thank you.


#10

I will send you private messages.


#11

I like the fact that here on FCC, you guys offer a fostering and nurturing environment for younger developers! That’s awesome.