How to style mdb components using bootstrap css classes?


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

Kunle Jegede asked 6 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 https://photos.app.goo.gl/VCyxNgzoGkTo8ZoY7  ?  

Damian Gemza staff answered 6 years ago

Dear Kunle Jegede, Logo: You have to use mdb-navbar-brand component with img in it:
 <mdb-navbar-brand>
        <a class="navbar-brand" href="#">
            <img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" height="30" alt="">
        </a>
    </mdb-navbar-brand>
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>
            </div>
        </form>
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>
            <li class="nav-item">
                <a class="nav-link waves-light" href="#" mdbWavesEffect>Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-light" href="#" mdbWavesEffect>Pricing</a>
            </li>
        </ul>
Icon - We've got the mdb-icon component. Here the documentation for it: https://mdbootstrap.com/angular/content/icons/ Best Regards, Damian

Kunle Jegede commented 6 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>
     </div>
     <mdb-card-body>
          <p class="h3-responsive">Lorem ipsum dolor sit amet, consectetur adipisci</p>
     </mdb-card-body>
</mdb-card>
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 6 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 answered 5 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 5 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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