Topic: How to overwrite mdb.css values?

marioqtanjr pro asked 7 years ago

Hi, I have a "search" textbox in my navbar to have its own customized UI. How can I overwrite it in my own css file? Thanks!

Marta Wierzbicka staff answered 4 years ago


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

Best, Marta

mdbnahid@122 free answered 4 years ago

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

mdbnahid@122 free answered 4 years ago

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

Marta Wierzbicka staff answered 6 years ago

I'm not sure how exactly your search form would look, but maybe you mean sth like this:
<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('');
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%;

<!-- Main navigation -->
<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 class="nav-item">
<a class="nav-link" href="#">Features</a>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
<!-- 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>
<!-- Links -->
<!-- Search form -->
<input type="text" name="search" placeholder="Search..">
<!-- Collapsible content -->
<!-- Main navigation -->


Chris Sweeney premium commented 6 years ago

Thanks Marta - you're a star! Cheers Chris

Marta Wierzbicka staff answered 7 years ago

Hello, Could you specify what exactly would you like to overwrite? E.g. Paste some screen and describe the problem? Then I will try to help you. Best, Marta

Chris Sweeney premium commented 6 years ago

Hi Marta I have the same issue on <a href="" rel="nofollow"></a> I'd like the search box in the navbar to be the default white box, with the magnifying glass. Hope you can help   (BTW - the option to subscribe to this thread doesn't appear - the word 'subscribe' does, but no checkbox) Cheers Chris

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No