html - Bootstrap alert's taking up two lines -
just wondering if there way can have bootstrap alert text display on 1 line without taking entire width of page:
http://codepen.io/euanr/pen/jdqyrp
as can see in codepen, alert taking 2 lines, if remove position: absolute;
alert take entire width page.
code:
html:
<div class="topleft"> <div class="alert alert-danger fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">× </a> <div class="innermessage"> error: fields must filled! </div> </div> </div>
css:
.topleft { position: absolute; top: 20px; left: 10px; padding: 5px; } .innermessage { padding-right:2px; }
just change .innermessage
width 225px, , adjust accordingly alert message width.
.innermessage { padding-right:2px; width: 225px; }
.topleft { position: absolute; top: 20px; left: 10px; padding: 5px; } .innermessage { padding-right:2px; width: 225px; }
<html> <head> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script> </head> <body> <div class="topleft"> <div class="alert alert-danger fade in"> <a href="#" class="close" data-dismiss="alert" aria label="close">× </a> <div class="innermessage"> error: fields must filled! </div> </div> </div> </body> </html>
it 225px no matter what, regardless of screen size, , long width bigger text width, it'll stay on 1 line.
Comments
Post a Comment