Arrange an Image with Bootstrap

Question

Is it possible to create such a design with Bootstrap: the image taking the top left and surrounded by text on wide devices and the image on top of the text on narrow devices? I am not sure how this positioning would be called and couldn't find a similar example.

Answer 1

I can't say too much without seeing your HTML or CSS. But I can provide an example of how this may work. I will assume your image will be large enough to fill a narrow device.

The CSS attribute and the terminology you would be looking for is "float" some documentation can be found here.

The HTML below is an example of an image with some text in it.

<p>
    <img src="example.png" />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id pulvinar urna. Cras scelerisque finibus aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut nec interdum metus. Donec iaculis, nisl quis dignissim tincidunt, lorem nulla rhoncus turpis, eu fermentum ante orci a libero. Suspendisse varius nisl ut dui tincidunt, et feugiat eros egestas. Sed rhoncus viverra tellus ut pulvinar. Morbi id enim eget mauris bibendum tristique. Duis gravida ligula metus, quis porta massa mattis facilisis.       
<p>

Now for some CSS.

/* This will align your image to the left within a p tag */
.image {
    float: left;
    margin: 10px;
}

/* To accommodate a smaller screen you will need a media query */
@media screen and (max-width: 640px) {
    .image {
        width: 100%;
        margin: 10px auto;
    }
}

I have made a quick JSfiddle with an example here. Hopefully I have provided you with enough to help you with your problem.