How to remove attributes from some bootstrap class

1

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

How can I always leave the list items in line 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><scriptsrc="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>
    
asked by anonymous 31.10.2018 / 16:01

1 answer

1

Your problem is that in CSS that 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 color of the border, so you avoid the misalignment of 1px of the thickness of the borada, but leave it invisible, transparent

<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><scriptsrc="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>
    
31.10.2018 / 16:10