Divider styling

demzl25 pro premium priority asked 3 years ago

Hi,

How is possible to create divider like on image below.

Expected behavior Link to the image of Expected example: https://ibb.co/BzDkS8D

Actual behavior I have divider that is always in the center.

Link to the Actual code snippet: https://mdbootstrap.com/snippets/standard/demzl25/3743045#html-tab-view

Thanks, Damjan


Michał Duszak staff answered 3 years ago

Hello, You can do it by deleting text-align: center; from .strike CSS and position quotes with margins, like so:

.strike {
    display: block;
    overflow: hidden;
    white-space: nowrap;
}

.strike>span {
    position: relative;
    display: inline-block;
    margin-left: 50px;
}

Here is a code snippet: https://mdbootstrap.com/snippets/standard/m-duszak/3746423


demzl25 pro premium priority commented 3 years ago

Thanks,

How can i add bottom Divider Quote icon to the right like in image bellow ? I have try but I m unable: https://ibb.co/SPQGDFv

With Best Regards,

Damjan


Michał Duszak staff commented 3 years ago

I created ID's for bottom span and bottom strike so that you can see the difference - here is the snippet: https://mdbootstrap.com/snippets/standard/m-duszak/3752522#css-tab-view


demzl25 pro premium priority commented 3 years ago

Thanks,

Damjan


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: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.2
  • Device: Pc
  • Browser: Chrome 97.0.4692.99
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes
Tags