Bootstrap: Having navigation with DIVs (or other elements) instead of UL > LI -


i want have own markup

<nav> <my-list class="nav-justified">     <item class="nav-item">text 1</item>     <item class="nav-item">text 2</item> </my-list> </nav> 

i cannot right because bootstrap targetting lis inside element name , not class

for example

.nav-justified {   width: 100%;    > li {     float: none;     > {       text-align: center;       margin-bottom: 5px;     }   } 

any ideas?

in case, have add css or change existing one.

as i'm using sass lot, thinking extending class/selector — using less need the equivalent :extend(.class)-method.

so add less-file in project , in there set markup , extend existing bootstrap-styles:

my-list:extend(.nav-justified) {...}  .nav-item:extend(.nav-justified > li) {...} 

(something in direction, depending on needs // code untested)

by extending existing selectors , working in separate file project should stay clean , re-use work in other projects use bootstrap.

more less extend feature


Comments

Popular posts from this blog

java - Suppress Jboss version details from HTTP error response -

gridview - Yii2 DataPorivider $totalSum for a column -

Sass watch command compiles .scss files before full sftp upload -