CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3
KAMONOHASHI
KAMONOHASHI

Reputation: 11

How to remove "nav-justified" with bootstrap

I am trying to create web page with bootstrap. Then, I used "nav-justified" as follows.

<div class="text-center">
    <div>
        <ul class="nav-justified">
            <li class="col-md-3">blah</li>
            <li class="col-md-3">blah</li>
            <li class="col-md-3">blah</li>
            <li class="col-md-3">blah</li>
        </ul>
    </div>
</div>

And on web page, if you arrange size as small, some points "・" appeared. I want to remove these"・" Could someone tell me how to solve this problem?

or Are there some way same as "nav-justified" without "・"?

I am so appreciate if you would answer my question. Thank you.

Upvotes: 1

Views: 145

Answers (3)

dvhh
dvhh

Reputation: 4750

shouldn't you add the nav class to your ul

<div class="text-center">
    <div>
        <ul class="nav nav-justified"> <!-- added the nav class here -->
            <li class="col-md-3">blah</li>
            <li class="col-md-3">blah</li>
            <li class="col-md-3">blah</li>
            <li class="col-md-3">blah</li>
        </ul>
    </div>

codepen link

PS : I don't think you need to specify the horizontal size of you list element (codepen without the size specifier)

Upvotes: 1

etude_web
etude_web

Reputation: 11

you just have to set this in your css (or customize bootstrap directly)

@media screen and (max-width:768px) {
    ul.nav-justified {
        list-style-type: none;
    }
}

Upvotes: 1

gtlambert
gtlambert

Reputation: 11961

Add the following to your CSS file:

ul.nav-justified {
  list-style-type: none
}

This will remove the bullet points from your list.

Upvotes: 0

Related Questions