Divider styling

Topic: Divider styling

demzl25 priority asked 2 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

Add comment

Michał Duszak staff answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

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 priority commented 2 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 2 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 priority commented 2 years ago

Thanks,

Damjan

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

demzl25

197Support score
55Questions 2Answers 224Snippets