Arrange an Image with Bootstrap -


is possible create such design bootstrap: image taking top left , surrounded text on wide devices , image on top of text on narrow devices? not sure how positioning called , couldn't find similar example.

image more clarity

i can't without seeing html or css. can provide example of how may work. assume image large enough fill narrow device.

the css attribute , terminology looking "float" documentation can found here.

the html below example of image 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 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 css.

/* align image left within p tag */ .image {     float: left;     margin: 10px; }  /* accommodate smaller screen need media query */ @media screen , (max-width: 640px) {     .image {         width: 100%;         margin: 10px auto;     } } 

i have made quick jsfiddle example here. have provided enough problem.


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -