Hi,

you can do it by using the Gulp version of the MDB package with SCSS files.

Best, Marta

i want to give a different desing for form button but i am unable to overwrite this mbd bootstrap code please give me suggestion and please resolve this problem immediately

i am unable to overwrite our mbd code for form button how can this will be possible for me

Hi,
I'm not sure how exactly your search form would look, but maybe you mean sth like this:
CSS:
<style type="text/css">
input[type=text] {
width: 130px;
height: 46px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('https://www.w3schools.com/howto/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 50%;
}
</style>
HTML:
<!-- Main navigation -->
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark indigo">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<!-- Links -->
<!-- Search form -->
<input type="text" name="search" placeholder="Search..">
</div>
<!-- Collapsible content -->
</nav>
<!--/.Navbar-->
</header>
<!-- Main navigation -->
Best,
Marta