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

Question

I want to have my 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 do that right now because bootstrap is targetting LIs inside by the element name only and not by a class

for example

.nav-justified {
  width: 100%;

  > li {
    float: none;
    > a {
      text-align: center;
      margin-bottom: 5px;
    }
  }

any ideas?

Can you put your code in jsfiddle or jsbin, so we can see what you are trying to do? You tagged your question with Angular2, but you are asking a Bootstrap CSS question, so obviously there is some confusion there :) — Brunis, Jul 19 '16 at 12:42
@Brunis: yeah, my mistake... somehow the form didn't clear after my previous question ;) sorry for the confusion... this is strictly bootstrap/"html" ;) — DS_web_developer, Jul 19 '16 at 12:48
@SebastianG.Marinescu: In theory I could change the nav.less in bootstrap's code... but don't really want to do that... but it seems I will have to overwrite it it with mine :) — DS_web_developer, Jul 19 '16 at 12:50

score 1 · Accepted Answer · edited May 23 '17 at 11:58

In your case, you have to add some CSS or change existing one.

As I'm using SASS a lot, I was thinking about extending a class/selector — but as you are using LESS you need the equivalent :extend(.class)-method.

So you could just add another LESS-file in your project and in there set up your markup and extend the existing Bootstrap-Styles:

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

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

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

By extending the existing selectors and working in a separate file your project should stay clean and you could re-use your work in other projects where you use Bootstrap.

More about the LESS extend feature

Yeah, I was thinking the same thing ;) just wasn't expressing myself correctly ;) Well, cheers for the input! appreciated! — DS_web_developer, Jul 19 '16 at 14:31

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

1 Answers1