Search code examples
twitter-bootstrapuser-interfaceresponsive-designhref

bootstrap alert-info text gets unreadable in mobile device when use with <a>

I am using a text with <a></a> in bootstrap class alert-info and it works find for big screen but when i open that page from mobile device or i make the window smaller then the text gets unreadable. But if i use this without <a></a> tag then its ok.

    <br>
    <div>
          <a class="alert alert-info" href="/process/info/"><?php echo $oFontawesome->icon(array('icon'=>'external-link')).' '._('This case contains an course info that you need to pay. Please register your payment through "Payments".');?></a>
    </div>

enter image description here

Solution

  • You should not use .alert in <a>, because <div> has the attribute 'display:block' but <a> has not. if you really want to use .alert in <a>, you need add a style for the element:

    <a class="alert alert-info"
   style="display:block">
      This case contains an course info that you need to pay. Please register your payment through "Payments"
</a>

    or you can put the <a> tag inside <div>:

    <div>
  <a class="alert alert-info">
        This case contains an course info that you need to pay. Please register your payment through "Payments"
  </a>
</div>