For the life of me I am unable to get these twitter bootstrap buttons to text wrap onto multiple lines, they appearing like so.
I cannot post images, so this is what it is doing...
[This is the bu] tton text
I would like it to appear like
[This is the ]
[button text ]
<div class="col-lg-3"> <!-- FIRST COL -->
<div class="panel panel-default">
<div class="panel-body">
<h4>Posted on</h4>
<p>22nd September 2013</p>
<h4>Tags</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
Any help would be much appreciated.
Edit. I have tried adding word-wrap:break-word; but it is not making any difference.
Edit. JSFiddle http://jsfiddle.net/TTKtb/ - You will need it expand the right column so the panels sit next to one another.
Try this: add white-space: normal; to the style definition of the Bootstrap Button or you can replace the code you displayed with the one below
<div class="col-lg-3"> <!-- FIRST COL -->
<div class="panel panel-default">
<div class="panel-body">
<h4>Posted on</h4>
<p>22nd September 2013</p>
<h4>Tags</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
I have updated your fiddle here to show how it comes out.
You can simply add this class.
.btn {
white-space:normal !important;
word-wrap: break-word;
}
FWIW, in Boostrap 4.4, you can add .text-wrap style to things like buttons:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
https://getbootstrap.com/docs/4.4/utilities/text/#text-wrapping-and-overflow
You can add these style's and it works just as expected.
.btn {
white-space:normal !important;
word-wrap: break-word;
word-break: normal;
}
Related
This is the image I want:
How can I make a fixed bootstrap panel height for all my panels?
<div class="col-md-3 padding-0">
<div class="panel panel-default">
<div class="panel-body" style="min-height: 10px; max-height: 10px;">
<img class="img-responsive" src="images/artgram.png" alt="">
<p>Have you ever been in a company’s reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better? Have you ever been in a company’s reception area that is so impressively stylish that
your concept of their professionalism or importance changed for the better?</p>
</div>
</div>
</div>
<div class="col-md-3 padding-0">
<div class="panel panel-default">
<div class="panel-body" style="min-height: 10px; max-height: 10px;">
<img class="img-responsive" src="images/artgram.png" alt="">
<p>Have you ever been in a company’s reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better?</p>
</div>
</div>
</div>
Either use fixed height with hidden overflow
.panel-body {
height: 100px; // or whatever
overflow: hidden;
}
or assign max rendered height to all panels dynamically using JS after load. See my answer for a quite similar question here. The snippet is copied below
var panels = document.getElementsByClassName('panel-body');
var maxHeight = Array.prototype.map.call(panels, function(panel) {
return parseInt(getComputedStyle(panel).height, 10);
})
.reduce(function(a, b) {
return Math.max(a, b);
});
for (var i = panels.length; i-- > 0;) {
panels[i].style.height = maxHeight + 'px';
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default col">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
so i have these 2 rows of text displaying in an info box....but one row has an icon and the next one doesnt. i'm not exactly sure how to align the words so that the second row without the icon is indented correctly.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="alert alert-info">
<i class="alert-icon-info alert-icon"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
</div>
it comes out like this
EDIT: also using bootstrap...if that helps
No need to wrap everything in divs, I would suggest just wrapping your copy in a span and using flexbox to align your items.
HTML Edit:
<div class="alert alert-info my-alert">
<i class="alert-icon-info alert-icon"></i>
<span class="alert-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</span>
</div>
CSS edit:
.my-alert {
display:flex;
flex-direction:row;
}
JSFiddle here: https://jsfiddle.net/visioncreative/ufu6Lcud/3/
Great documentation on Flexbox at CSS-Tricks here, https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If you are able to make a custom stylesheet, you should try display: flex;.
Creating container span for your text and then setting them to stand on the same line with flexbox is pretty easy then.
.alert {
display: flex;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="alert alert-info">
<i class="alert-icon-info alert-icon"><!--WARNING : remove the image, it's only there to demonstrate that it's working--><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Info_icon-72a7cf.svg/1024px-Info_icon-72a7cf.svg.png" width="20"/><!--END OF WARNING--></i>
<span class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </span>
</div>
See here for a complete guide : A Complete Guide to Flexbox
I'm trying out some things with a material designe framework but some things just won't work.
Here is what i got:
screenshot
But I want the text to start on the top and stay there so the text won't jump into another line like in the picture.
I hope you guys can help me.
<p><img src="http://placehold.it/350x150" alt="W3Schools.com" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
I would use a table, like this:
<table><tr><th><img src="yourimgsrc.jpeg"></th><th><p>Your text here</p></th></tr></table>
This prevents your problem, because the two rows (<th>) end on the same height
I believe this is what you are looking for. You will have to have both, the IMG and the text in one <div> and then surround both of them in a separate <div>
#header{
display:flex;
flex-direction:row;
}
#column1{
display:flex;
flex-direction:column;
}
#column2{
display:flex;
flex-direction:column;
padding-left: 20px;
}
<div id="header">
<div id="column1"><img src="http://placehold.it/350x150" alt="W3Schools.com" width="100" height="140"></div>
<div id="column2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
</div>
How do i get this piece of HTML working so the text vertically aligns to the top of the image icon and continues to wrap below?
Here's what i have so far:
<div style="width:300px;">
<i class="icon-twitter icon-4x"></i> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor sit amet, consectetur adipiscing elit adipiscing elit adipiscing elit adipis Lorem ipsum dolor dolor</span>
</div>
https://jsfiddle.net/xe9zD/
Any help is much appreciated.
Thanks
If you are using the default bootstrap css, it includes helper classes to float left and right. if you add the class pull-left to your icon, it will float it left.
<i class="icon-twitter icon-4x pull-left"></i>
EDIT: And that also gives it a nice margin so it does not butt up against the text. Its part of your font awesome css file.
Add this CSS rule:
.icon-twitter.icon-4x {
float:left;
}
JSFiddle example
Working DEMO
use float left
.icon-twitter icon-4x
{
float: left;
}
if it is directly coming from live css then
<i style="float:left;" class="icon-twitter icon-4x"></i> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor sit amet, consectetur adipiscing elit adipiscing elit adipiscing elit adipis Lorem ipsum dolor dolor</span>
I need to add a custom class to every anchor tag found within h1 tags, leaving all other anchor tags untouched.
At the moment I have:
$content = preg_replace("/(<h1.*?<a.*?)/i","$1 class=\"mystyle\"",$content);
The problem with the above is that it only adds my class to the first anchor found in any h1 header and I'm really struggling to figure out how to correct this.
To clarify,
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
Becomes,
<h1><a class="mystyle" href="page.html">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1><a class="mystyle" href="page.html">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit.</h1>
Bit of a regex beginner so apologies if this is a really stupid question,
I have searched for hours and hours trying to get this on my own so I hope someone can help!
Cheers
Done with the help of $xpath->query('//h1//a');