How to style mdb components using bootstrap css classes?

Topic: How to style mdb components using bootstrap css classes?

Kunle Jegede asked 3 years ago

Hello, I am new to mdb, I want to customize components such as mdb-navbar, mdb-card and other mdb components. I have added some css class trying to customize these components but failed How can I style the navbar to achieve this type of navigation bar  ?  

Damian Gemza staff answered 3 years ago

Dear Kunle Jegede, Logo: You have to use mdb-navbar-brand component with img in it:
        <a class="navbar-brand" href="#">
            <img src="" height="30" alt="">
Search Courses input: There a lot of search inputs in our navbars component, for example something like this:
<form class="form-inline waves-light" mdbWavesEffect>
            <div class="md-form mt-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                <button mdbBtn color="success" outline="true" size="sm" class="my-0 waves-light" type="submit" mdbWavesEffect>Search</button>
Links at the right side of the navbar - .d-flex and .justify-content-end classes in links container:
<ul class="navbar-nav d-flex justify-content-end">
            <li class="nav-item active">
                <a class="nav-link waves-light" href="#" mdbWavesEffect>Home <span class="sr-only">(current)</span></a>
            <li class="nav-item">
                <a class="nav-link waves-light" href="#" mdbWavesEffect>Features</a>
            <li class="nav-item">
                <a class="nav-link waves-light" href="#" mdbWavesEffect>Pricing</a>
Icon - We've got the mdb-icon component. Here the documentation for it: Best Regards, Damian

Kunle Jegede commented 3 years ago

Please Check Out my further questions

Thank you Damian for helping out. Though I have another issue. here is my code
<mdb-card class="example z-depth-5">
     <div class="view rgba-white-slight waves-light pt-5 text-center d-flex justify-content-center" mdbWavesEffect>
          <mdb-card-img src="assets/list-icon.svg" alt="Card image cap"></mdb-card-img>
          <p class="h3-responsive">Lorem ipsum dolor sit amet, consectetur adipisci</p>
I want to add more shadow to the card mdb-card component, but no matter the z-depth I added, there is no changes. My questions are:
  1. How do I add more shadow to  a Card Component?
  2. What is the right syntax to use in styling components whose tag begins <mdb-example></mdb-example> ?
  3. I have written scss codes to the current components I am working on and applied it to <mdb-example></mdb-example> but it did not work. How can I make my css codes work on <mdb-example></mdb-example> ?
Please I need your response to understand mdb so I can easily work work it. Thank you

Damian Gemza staff commented 3 years ago

1. We have to work on that because this is a bug, 2. simple class should work fine, 3. Could you please provide me with a list of components on which your styles are not working? Best Regards, Damian

Sebopede pro premium answered 2 years ago

Has this been resolved? i am still unable to style the mdb-Components. I am only able to modify css in the chrome developper tools. Can someone help with this?

Arkadiusz Idzikowski staff commented 2 years ago

What are the exact problems with styling? Please provide some examples.

Please insert min. 20 characters.


Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: PC, Mobile
  • Browser: Chrome
  • OS: Windows, Linux. Others
  • Provided sample code: No
  • Provided link: No