How to style mdb components using bootstrap css classes?

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

Kunle Jegede free 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 ?

Add comment

Damian Gemza staff answered 6 years ago

1 0 Best answer

Dear Kunle Jegede,

Logo: You have to use mdb-navbar-brand component with img in it:
<pre class="code-toolbar language-markup"><code class=" language-markup"> <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></code></pre>
Search Courses input: There a lot of search inputs in our navbars component, for example something like this:
<pre class="code-toolbar language-markup"><code class=" language-markup"><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></code></pre>
Links at the right side of the navbar - .d-flex and .justify-content-end classes in links container:
<pre class="code-toolbar language-markup"><code class=" language-markup"><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></code></pre>
Icon - We've got the mdb-icon component. Here the documentation for it: https://mdbootstrap.com/angular/content/icons/

Best Regards,

Damian

Please insert min. 20 characters.

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 free commented 6 years ago

Please Check Out my further questions

Add comment

Sebopede free answered 5 years ago

0 0 Best answer

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.

Add comment

Kunle Jegede free answered 6 years ago

0 0 Best answer

Thank you Damian for helping out.

Though I have another issue. here is my code
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><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>
 Lorem ipsum dolor sit amet, consectetur adipisci
 </mdb-card-body>
</mdb-card></pre>
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:
<ol>
 	<li>How do I add more shadow to  a Card Component?</li>
 	<li>What is the right syntax to use in styling components whose tag begins <mdb-example></mdb-example> ?</li>
 	<li>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> ?</li>
</ol>
Please I need your response to understand mdb so I can easily work work it.

Thank you

Please insert min. 20 characters.

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:

How do I add more shadow to a Card Component?
What is the right syntax to use in styling components whose tag begins <mdb-example></mdb-example> ?
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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

Kunle Jegede

15Support score
1Questions 1Answers 1Snippets