0

I'm trying to get rid of a bullet point in a row, but for some reason the first one is gone but the other is not.

I just want the email and phone to be side by side with no list. 

.get_in {
  list-style: none;
}
<div class="row">
  <div class="col-md-6">
    <ul class="get_in">
      <li><i class="fa fa-envelope-o"></i>
        <p>111111@hotmail.com</p>
      </li>
  </div>
  <div class="col-md-6">
    <li><i class="fa fa-phone"></i>
      <p>(+41) 11111111</p>
    </li>
    </ul>
  </div>
</div>
Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
Blindeagle
  • 91
  • 7

4 Answers4

0

Your HTML is invalid, and your browser is attempting to fill in the holes. If you inspect the actual rendered HTML in your browser's developer tools, you'll most likely see:

<div class="row">
  <div class="col-md-6">
    <ul class="get_in">
      <li><i class="fa fa-envelope-o"></i><p>111111@hotmail.com</p></li>
    </ul>
  </div>  
  <div class="col-md-6">
    <li><i class="fa fa-phone"></i><p>(+41) 11111111</p></li>       
  </div>  
</div>

Note that in the second column the li is not wrapped with a ul, which is why your CSS rule does not apply.

I just want the email and phone to be side by side with no list

If this is the case, then don't use a list:

<div class="row">
  <div class="col-md-6">
    <i class="fa fa-envelope-o"></i> 111111@hotmail.com
  </div>
  <div class="col-md-6">
    <i class="fa fa-phone"></i> (+41) 11111111
  </div>
</div>
chazsolo
  • 7,873
  • 1
  • 20
  • 44
0

Just some messed up HTML. Close your first ul, create another for the second list and give the same class name. 

.get_in {
    list-style: none;
}
<div class="row">
  <div class="col-md-6">
    <ul class="get_in">
      <li><i class="fa fa-envelope-o"></i>
        <p>111111@hotmail.com</p>
      </li>
    </ul>
  </div>
  <div class="col-md-6">
    <ul class="get_in">
      <li><i class="fa fa-phone"></i>
        <p>(+41) 11111111</p>
      </li>
    </ul>
  </div>
</div>
StefanBob
  • 4,857
  • 2
  • 32
  • 38
0

First, let's put your ul tag which opens, under the first div tag. Second, let's put your ul tag which closes, between the last div and before the last div tags.

    <div class="row">
        <ul class="get_in">
        <div class="col-md-6">
            <li><i class="fa fa-envelope-o"></i><p>111111@hotmail.com</p></li>              
        </div>  
        <div class="col-md-6">
            <li><i class="fa fa-phone"></i><p>(+41) 11111111</p></li>       
        </div>
        </ul>
    </div>
dildeolupbiten
  • 1,314
  • 1
  • 15
  • 27
  • having a div as a direct child of a ul is not valid html, even if it does render, check out this other post. http://stackoverflow.com/questions/11755628/can-i-use-div-as-a-direct-child-of-ul – Joe Lissner May 15 '17 at 20:41
  • Oh, I have checked out the posts about div inside a list. Thank you. – dildeolupbiten May 15 '17 at 20:58
0

You can't open a ul element in one div and then close it in another div.

This is your HTML:

    <div class="row">
       <div class="col-md-6">
            <ul class="get_in">
              <li><i class="fa fa-envelope-o"></i><p>111111@hotmail.com</p></li>    
          </div> 
          <div class="col-md-6">
              <li><i class="fa fa-phone"></i><p>(+41) 11111111</p></li>  
            </ul>
          </div> 
        </div>

Change your HTML to:

    <div class="row">
       <div class="col-md-6">
            <ul class="get_in">
              <li><i class="fa fa-envelope-o"></i><p>111111@hotmail.com</p></li>        </ul>
          </div> 
          <div class="col-md-6">
            <ul>
              <li><i class="fa fa-phone"></i><p>(+41) 11111111</p></li> 
            </ul>
          </div> 
        </div>

I hope that this has helped you.

Adam
  • 77
  • 10