Ul li bullet icon remove from Bootstarp Tab

Ul li bullet icon remove from Bootstarp Tab

by Debashis Debnath -
Number of replies: 3

HI

I'm using moodle 3.8 and bootstrap 4; when using custom TAB code, it shows a black dot in front of every TAB. Kindly suggest to me how to remove the Black dot. 



<p>Tab1</p>

<ul style="list-style-type: none;" class="nav nav-pills mb-3" id="pills-tab" role="tablist">

<li class="nav-item"><a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a></li>

<li class="nav-item"><a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a></li>

<li class="nav-item"><a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a></li>

</ul>

<div class="tab-content" id="pills-tabContent">

<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Tab 1</div>

<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Tab 2</div>

<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Tab 3</div>

</div>

Average of ratings: -
In reply to Debashis Debnath

Re: Ul li bullet icon remove from Bootstarp Tab

by Leon Stringer -
Picture of Core developers Picture of Particularly helpful Moodlers

Presumably you need list-style: none applied to the relevant CSS selector, possibly:

ul.nav-pills { list-style: none; }

Depending on how the tabs were created this might need adding to the theme settings or to style.css if you've created a plugin.

If you need further help with this, please let us know how these tabs have been created.

Average of ratings: -
In reply to Leon Stringer

Re: Ul li bullet icon remove from Bootstarp Tab

by Debashis Debnath -
Hi, Leon

Thank you for your kind reply. Are there other alternatives I can use without making core-level changes in the Code? As you have seen the Code I posted, is it possible to write inline CSS to effect the change and remove the Black dot? Please let me know if it is possible, as I am not the admin of this site.
Average of ratings: -
In reply to Debashis Debnath

Re: Ul li bullet icon remove from Bootstarp Tab

by Debashis Debnath -
HI, @Leon I have found the solution for the same. Now you can write inline CSS and solve the issue which I addressed. Please check the below-mentioned code.


<h2>Toggleable Tabs</h2>
<br /> <!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br />
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br />
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br />
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>

< (Remove this !--) script type="text/javascript">// <![CDATA[
var newStyle = document.createElement("style");
newStyle.innerHTML = 
    ".course-content .activity_list .content .summary>.no-overflow ul>li::before, .course-content .section .content .summary>.no-overflow ul>li::before {"+
    "content: ' ' !important;"+
    "}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
// ]]></script (Remove This)>
Average of ratings: -