Topic: How to style mdb components using bootstrap css classes?
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 ?
<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><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><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>
<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> ?
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
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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