Twitter Bootstrap Question posted in

Bootstrap left aligned images affecting text layout – Twitter bootstrap

I am using Twitter Bootstrap to build a basic WordPress theme. Everything is working fine apart from when it comes to including images aligned left with some text. My example is below…

<div class="entry-content">
    <div>
        <img class="size-medium wp-image-4587 alignleft" src="https://dummyimage.com/300x200/000000/fff" width="300" height="200">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa, varius eleifend commodo a, efficitur a magna. Cras egestas porta vehicula. Suspendisse egestas sem in nunc tincidunt venenatis. Proin volutpat vulputate vehicula. Suspendisse odio turpis, imperdiet id dictum sed, laoreet vel eros. Quisque a ultricies erat. Quisque est ante, venenatis sed ligula ac, pulvinar consequat felis. Nulla egestas ut odio at sodales. Etiam in urna arcu.
    </div>

    <div>
        Vivamus blandit rutrum augue, nec sodales ipsum sagittis non. Nam nec mi quis lectus lacinia bibendum. In hac habitasse platea dictumst. Fusce finibus eget nunc at varius. Nam nec dignissim neque, sit amet pretium sem. Quisque eu magna at neque aliquam luctus. Maecenas molestie porta faucibus. Aliquam ac erat consequat, ullamcorper risus eget, lacinia dolor. Nullam tincidunt sit amet mauris et tempus. Duis iaculis dictum nunc nec sollicitudin.
    </div>
</div>

https://jsfiddle.net/DTcHh/25884/

If you make the windows smaller it works fine until it gets really small, then the text starts to space out oddly.

I understand that it is because the individual words are longer than the space available but I can’t think of a way to prevent this, anyone have any advice?

Tags:

2

Answers


  1. 0

    you could use @media queries so when the screen is too small, the image is not floated and so the text goes below it.

    i also added margin:0 auto so the img will be centered but that’s only if you want to.

    see jsfiddle or code snippet below.

    OR you could set a max-width:x px to the image when the screen gets smaller. and leave it floated left see here > max-width

    let me know if it helps

    /* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.alignleft{float:left;margin-right:10px;}

@media only screen and (max-width: 460px) {

  .alignleft{float:none;display:block;margin:0 auto;}
	
}
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="entry-content">
    <div>
            <img class="size-medium wp-image-4587 alignleft" src="https://dummyimage.com/300x200/000000/fff" width="300" height="200">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa, varius eleifend commodo a, efficitur a magna. Cras egestas porta vehicula. Suspendisse egestas sem in nunc tincidunt venenatis. Proin volutpat vulputate vehicula. Suspendisse odio turpis, imperdiet id dictum sed, laoreet vel eros. Quisque a ultricies erat. Quisque est ante, venenatis sed ligula ac, pulvinar consequat felis. Nulla egestas ut odio at sodales. Etiam in urna arcu.
    </div>

    <div>
        Vivamus blandit rutrum augue, nec sodales ipsum sagittis non. Nam nec mi quis lectus lacinia bibendum. In hac habitasse platea dictumst. Fusce finibus eget nunc at varius. Nam nec dignissim neque, sit amet pretium sem. Quisque eu magna at neque aliquam luctus. Maecenas molestie porta faucibus. Aliquam ac erat consequat, ullamcorper risus eget, lacinia dolor. Nullam tincidunt sit amet mauris et tempus. Duis iaculis dictum nunc nec sollicitudin.
    </div>
</div>
    Login or Signup to reply.
  2. 0

    Try using the white-space property.

    /* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.alignleft{
  float:left;margin-right:10px;
clear: left;
}
p{
white-space: -moz-pre-wrap !important;
white-space: -webkit-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
white-space: normal;
}
    <div class="entry-content">
    <div>
            <img class="size-medium wp-image-4587 alignleft" src="https://dummyimage.com/300x200/000000/fff" width="300" height="200">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa, varius eleifend commodo a, efficitur a magna. Cras egestas porta vehicula. Suspendisse egestas sem in nunc tincidunt venenatis. Proin volutpat vulputate vehicula. Suspendisse odio turpis, imperdiet id dictum sed, laoreet vel eros. Quisque a ultricies erat. Quisque est ante, venenatis sed ligula ac, pulvinar consequat felis. Nulla egestas ut odio at sodales. Etiam in urna arcu.</p>
    </div>

    <div>
        Vivamus blandit rutrum augue, nec sodales ipsum sagittis non. Nam nec mi quis lectus lacinia bibendum. In hac habitasse platea dictumst. Fusce finibus eget nunc at varius. Nam nec dignissim neque, sit amet pretium sem. Quisque eu magna at neque aliquam luctus. Maecenas molestie porta faucibus. Aliquam ac erat consequat, ullamcorper risus eget, lacinia dolor. Nullam tincidunt sit amet mauris et tempus. Duis iaculis dictum nunc nec sollicitudin.
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search