How to remove attributes from some bootstrap class

Question

How to remove attributes from some bootstrap class

Asked 6 years ago

Viewed 560 times

1

I have the Modal below which included a Wizard to show some information. For this, I am using the tag <ul> to align, but I’m using the class nav nav-tabs, but it generates a line that I can’t remove.

How can I always align the list items and/or remove this line from the class ?

Code:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
  
  
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!------ Include the above in your HEAD tag ---------->
  
  <style>
  ul.list-inline.pull-right{
      margin-top: 36%;
  }
  .wizard {
    margin: 20px auto;
}

    .wizard .nav-tabs {
        position: relative;
        margin: -35px auto;
        margin-bottom: 0;
        border-bottom-color: #e0e0e0;
		width: 333px;
    }

    .wizard > div.wizard-inner {
            width: 72%;
    }

.connecting-line {
    height: 0px;
    background: #e0e0e0;
    position: absolute;
    width: 80%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 1;
}

.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    border: 0;
    border-bottom-color: transparent;
}

span.round-tab {
    width: 70px;
    height: 70px;
    line-height: 70px;
    display: inline-block;
    border-radius: 100px;
    background: #fff;
    border: 2px solid #e0e0e0;
    z-index: 2;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 25px;
}
span.round-tab i{
    color:#555555;
}
.wizard li.active span.round-tab {
    background: #fff;
    border: 2px solid #5bc0de;
    
}
.wizard li.active span.round-tab i{
    color: #5bc0de;
}

span.round-tab:hover {
    color: #333;
    border: 2px solid #333;
}

.wizard .nav-tabs > li {
    width: 25%;
}

.wizard li:after {
    content: " ";
    position: absolute;
    left: 46%;
    opacity: 0;
    margin: 0 auto;
    bottom: 0px;
    border: 5px solid transparent;
    border-bottom-color: #5bc0de;
    transition: 0.1s ease-in-out;
}

.wizard li.active:after {
    content: " ";
    position: absolute;
    left: 46%;
    opacity: 0;
    margin: 0 auto;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom-color: #5bc0de;
}

.wizard .nav-tabs > li a {
    width: 70px;
    height: 70px;
    margin: 20px auto;
    border-radius: 100%;
    padding: 0;
}

    .wizard .nav-tabs > li a:hover {
        background: transparent;
    }

.wizard .tab-pane {
    position: relative;
    padding-top: 50px;
}

.wizard h3 {
    margin-top: 0;
}

@media( max-width : 585px ) {

    .wizard {
        width: 90%;
        height: auto !important;
    }

    span.round-tab {
        font-size: 16px;
        width: 50px;
        height: 50px;
     
    }

    .wizard .nav-tabs > li a {
        width: 50px;
        height: 50px;
      
    }

    .wizard li.active:after {
        
        position: absolute;
        left: 35%;
    }
}
</style>

<script>
$(document).ready(function () {
    //Initialize tooltips
    //$('.nav-tabs > li a[title]').tooltip();
    
    //Wizard
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

        var $target = $(e.target);
    
    
    });

    $(".next-step").click(function (e) {

        var $active = $('.wizard .nav-tabs li.active');
        $active.next().removeClass('disabled');
        nextTab($active);

    });
    $(".prev-step").click(function (e) {

        var $active = $('.wizard .nav-tabs li.active');
        prevTab($active);

    });
});

function nextTab(elem) {
    $(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
    $(elem).prev().find('a[data-toggle="tab"]').click();
}
</script>
</head>
<body>

  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog" style="width: 50%;">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <img src="C:\Users\igor.carreiro\Pictures\iris.png" id="logo" height="60" width="60" style="float:left;">   
		  <h3 class="modal-title" style="color: deepskyblue;z-index: 999;margin-top: 23px;text-align: center;">Novidades</h3>
        </div>
        <div class="modal-body">
         <div class="container">
	<div class="row">
		<section>
        <div class="wizard">
            <div class="wizard-inner">
                <div class="connecting-line"></div>
			<div style="width: 100%">
               <ul class="nav nav-tabs"  style="margin-left: 50%;">

       <li role="presentation" class="active">
                        <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="step 1">
                            <span class="round-tab">
                            <i class="material-icons" style="font-size:48px;  margin-top: 8px;">&#xe400;</i>
                            </span>
                        </a>
                    </li>

                    <li role="presentation">
                        <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="step 2">
                            <span class="round-tab">
                                   <i class="material-icons" style="font-size:48px;  margin-top: 8px;">&#xe401;</i>
                            </span>
                        </a>
                    </li> 
                </ul>
				</div>
            </div>

            <form role="form">
                <div class="tab-content" style="    margin-top: -39px;">
                    <div class="tab-pane active" role="tabpanel" id="step1">
                        <h3>Raio de 200m</h3>
                        <p>Breve Descrição da funcionalidade</p>
						<br>
						<img src="C:\Users\igor.carreiro\Pictures\raio.jpg" width="900px"     height="500px">
                        <ul class="list-inline pull-right">
                          <!-- <li><button type="button" class="btn btn-default next-step">Próximo</button></li> -->
                        </ul>
                    </div>
                    <div class="tab-pane" role="tabpanel" id="step2">
                        <h3>Nova interface das operações</h3>
                        <p>Breve Descrição da funcionalidade</p>
						<br>
						<img src="C:\Users\igor.carreiro\Pictures\interface.png"  width="900px"     height="500px">
                        <ul class="list-inline pull-right">
				<!-- 		 <li><button type="button" class="btn btn-default prev-step">Anterior</button></li>
						<li><button type="button" class="btn btn-default next-step">Próximo</button></li> -->
                       
                        </ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </form>
        </div>
    </section>
   </div>
</div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>



</body>
</html>

1 answer

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-10-31T15:10:23+00:00

Your problem is that in CSS it is this way

.wizard .nav-tabs {
    position: relative;
    margin: -35px auto;
    margin-bottom: 0;
    border-bottom-color: transparent; 
    width: 333px;
}
.nav-tabs {
    border-bottom: 1px solid #ddd;
}

So just put the color transparant in the border color, so vc prevents the 1px misalignment of the borate thickness, but leaves it invisible, transparent

See how it looks in the code: OBS In the snippet here the code does not work right, but there will open normal

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
  
  
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!------ Include the above in your HEAD tag ---------->
  
  <style>
  ul.list-inline.pull-right{
      margin-top: 36%;
  }
  .wizard {
    margin: 20px auto;
}

    .wizard .nav-tabs {
        position: relative;
        margin: -35px auto;
        margin-bottom: 0;
        border-bottom-color: transparent; 
		width: 333px;
    }

    .wizard > div.wizard-inner {
            width: 72%;
    }

.connecting-line {
    height: 0px;
    background: #e0e0e0;
    position: absolute;
    width: 80%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 1;
}

.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    border: 0;
    border-bottom-color: transparent;
}

span.round-tab {
    width: 70px;
    height: 70px;
    line-height: 70px;
    display: inline-block;
    border-radius: 100px;
    background: #fff;
    border: 2px solid #e0e0e0;
    z-index: 2;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 25px;
}
span.round-tab i{
    color:#555555;
}
.wizard li.active span.round-tab {
    background: #fff;
    border: 2px solid #5bc0de;
    
}
.wizard li.active span.round-tab i{
    color: #5bc0de;
}

span.round-tab:hover {
    color: #333;
    border: 2px solid #333;
}

.wizard .nav-tabs > li {
    width: 25%;
}

.wizard li:after {
    content: " ";
    position: absolute;
    left: 46%;
    opacity: 0;
    margin: 0 auto;
    bottom: 0px;
    border: 5px solid transparent;
    border-bottom-color: #5bc0de;
    transition: 0.1s ease-in-out;
}

.wizard li.active:after {
    content: " ";
    position: absolute;
    left: 46%;
    opacity: 0;
    margin: 0 auto;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom-color: #5bc0de;
}

.wizard .nav-tabs > li a {
    width: 70px;
    height: 70px;
    margin: 20px auto;
    border-radius: 100%;
    padding: 0;
}

    .wizard .nav-tabs > li a:hover {
        background: transparent;
    }

.wizard .tab-pane {
    position: relative;
    padding-top: 50px;
}

.wizard h3 {
    margin-top: 0;
}

@media( max-width : 585px ) {

    .wizard {
        width: 90%;
        height: auto !important;
    }

    span.round-tab {
        font-size: 16px;
        width: 50px;
        height: 50px;
     
    }

    .wizard .nav-tabs > li a {
        width: 50px;
        height: 50px;
      
    }

    .wizard li.active:after {
        
        position: absolute;
        left: 35%;
    }
}
</style>

<script>
$(document).ready(function () {
    //Initialize tooltips
    //$('.nav-tabs > li a[title]').tooltip();
    
    //Wizard
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

        var $target = $(e.target);
    
    
    });

    $(".next-step").click(function (e) {

        var $active = $('.wizard .nav-tabs li.active');
        $active.next().removeClass('disabled');
        nextTab($active);

    });
    $(".prev-step").click(function (e) {

        var $active = $('.wizard .nav-tabs li.active');
        prevTab($active);

    });
});

function nextTab(elem) {
    $(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
    $(elem).prev().find('a[data-toggle="tab"]').click();
}
</script>
</head>
<body>

  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog" style="width: 50%;">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <img src="C:\Users\igor.carreiro\Pictures\iris.png" id="logo" height="60" width="60" style="float:left;">   
		  <h3 class="modal-title" style="color: deepskyblue;z-index: 999;margin-top: 23px;text-align: center;">Novidades</h3>
        </div>
        <div class="modal-body">
         <div class="container">
	<div class="row">
		<section>
        <div class="wizard">
            <div class="wizard-inner">
                <div class="connecting-line"></div>
			<div style="width: 100%">
               <ul class="nav nav-tabs"  style="margin-left: 50%;">

       <li role="presentation" class="active">
                        <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="step 1">
                            <span class="round-tab">
                            <i class="material-icons" style="font-size:48px;  margin-top: 8px;">&#xe400;</i>
                            </span>
                        </a>
                    </li>

                    <li role="presentation">
                        <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="step 2">
                            <span class="round-tab">
                                   <i class="material-icons" style="font-size:48px;  margin-top: 8px;">&#xe401;</i>
                            </span>
                        </a>
                    </li> 
                </ul>
				</div>
            </div>

            <form role="form">
                <div class="tab-content" style="    margin-top: -39px;">
                    <div class="tab-pane active" role="tabpanel" id="step1">
                        <h3>Raio de 200m</h3>
                        <p>Breve Descrição da funcionalidade</p>
						<br>
						<img src="C:\Users\igor.carreiro\Pictures\raio.jpg" width="900px"     height="500px">
                        <ul class="list-inline pull-right">
                          <!-- <li><button type="button" class="btn btn-default next-step">Próximo</button></li> -->
                        </ul>
                    </div>
                    <div class="tab-pane" role="tabpanel" id="step2">
                        <h3>Nova interface das operações</h3>
                        <p>Breve Descrição da funcionalidade</p>
						<br>
						<img src="C:\Users\igor.carreiro\Pictures\interface.png"  width="900px"     height="500px">
                        <ul class="list-inline pull-right">
				<!-- 		 <li><button type="button" class="btn btn-default prev-step">Anterior</button></li>
						<li><button type="button" class="btn btn-default next-step">Próximo</button></li> -->
                       
                        </ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </form>
        </div>
    </section>
   </div>
</div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>



</body>
</html>