Problem when customizing search bar

Asked

Viewed 258 times

2

Hello, I’m having trouble fixing the search bar in the center of the navbar, since every change in css doesn’t change anything.

HTML:

<html>

    <head>

          <!-- Bootstrap CSS-->
          <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

          <!-- Main CSS -->
          <link href="src/css/style.css" rel="stylesheet" media="all">

    </head>

    <body>

        <!-- Start Navigation bar -->

        <nav class="navbar navbar-expand-md navbar-light bg-faded">
            <div class="collapse navbar-collapse">
                <form class="form-inline mr-auto">
                    <input class="form-control" type="search" placeholder="Search">
                </form>
            </div>
        </nav>

        <!-- End Navigation bar -->

    </body>

</html>

CSS:

.navbar {
    background-color: #3f3f3f;
}

#search .form-control {
    width: 200px;
    text-align: center;
}

Thank you for your patience.

html css twitter-bootstrap

  • Having to make your search bar responsive? This might help: https://www.w3schools.com/howto/howto_css_searchbar.asp

  • @Wandersonrodrigo Hi, I’m actually trying to fix the search bar in the center of the navbar, since currently it is in the left corner, sorry if I wasn’t clear on the question.

  • Hello @Nithogg, all right? Have you tried assigning class="Fixed-top"in your navbar? I believe you can solve your problem.

  • These examples here can help:link

  • 1

    With help from many here I noticed several errors in the code, I will review everything. Thank you!

2 answers

2


Guy your code has some mistakes.

First you have in CSS a pro class ID #search, but in HTML no element has this ID.

You can use the native Bootstrap classes to align the way you want. First with w-100 you leave the form with 100% width, then with m-auto you let the input centralized.

OBS: You used some classes like mr-auto wrong way in my view, this also gets in the way. Besides, you are missing important classes in your navbar, try to follow the documentation! https://getbootstrap.com/docs/4.0/components/navbar/

Run "Whole Page" to see how it looks, because you are using the class navbar-expand-md in navbar, That doesn’t let her appear on the small screen

<html>

    <head>

          <!-- Bootstrap CSS-->
          <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

          <!-- Main CSS -->
          <link href="src/css/style.css" rel="stylesheet" media="all">
<style>

.navbar {
    background-color: #3f3f3f;
}

#search .form-control {
    width: 200px;
}
</style>

    </head>

    <body>

        <!-- Start Navigation bar -->

        <nav class="navbar navbar-expand-md navbar-light bg-faded">
            <div class="collapse navbar-collapse">
                <form class="form-inline w-100" id="search">
                    <input class="form-control m-auto" type="search" placeholder="Search">
                </form>
            </div>
        </nav>

        <!-- End Navigation bar -->

    </body>

</html>

  • 1

    I’m sorry about all this nonsense, I haven’t used bootstrap for a long time and I’m a little lost now that I’m back. I’m going to review the missing classes. Thanks for the help! ;D

  • @Nithogg peaceful framework eh for this, already comes with built-in classes to be used even rss. The boring part is that we have to follow the documentation. Even the bootstrap 4 itself already has all the classes of Flex nor need to write in hand as the friend of the other answer suggested... Look in the utilities d bs4 by Flex that you will see ;)

  • 1

    The important thing is not to correct at what cost, the important thing is to understand where is wrong, Pq, and how to correct

2

Follows friend

<html>

<head>

    <!-- Bootstrap CSS-->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="src/css/style.css" rel="stylesheet" media="all">

</head>

<body>

<!-- Start Navigation bar -->

<nav class="navbar navbar-expand-md navbar-light bg-faded">
    <div class="collapse navbar-collapse" id="search">
        <form class="form-inline">
            <input class="form-control" type="search" placeholder="Search">
        </form>
    </div>
</nav>

<!-- End Navigation bar -->

</body>

</html>

CSS

.navbar {
     background-color: #3f3f3f;
        }

#search {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.