I'm trying to work my flex and i used flex wrap because i want 3 blocks when it's a laptop and 1 block when it's a phone. But for the moment, nothing moove, i have 3 block with my laptop and also with my phone.
I thought it was flexWrap to make the block pass to the other line but it doesn't works
i tried to don't used bootstrap for this one so i'm a little bit lost without !
<div class="flexbox">
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div>
<p>4.8/5</p>
<p><i>Par critique 1</i></p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book
</p>
</div>
</div>
</div>
.flexbox {
margin-top: 10%;
display: flex;
flex-wrap: wrap;
}
.image {
max-width: 100%;
}
.containerReview {
border-left: 5px solid red;
background-color: ghostwhite;
width: fit-content;
flex: 1;
}
.containerReviewFinal {
border-left: 5px solid red;
background-color: ghostwhite;
}
flex-wrap: wrap; does not guarantee that it will be one column on mobile phone, because it wraps the element if it reaches its minimum width. so on bigger phones you may have two columns.
Solution 1
(it depends on screen size, so maybe a bigger phone will have two columns per row) Check the snippet:
.flexbox {
margin-top: 10%;
display: flex;
flex-wrap: wrap;
}
.image {
max-width: 100%;
}
.containerReview {
border-left: 5px solid red;
background-color: ghostwhite;
min-width:200px;
white-space:wrap;
max-width:100%;
width:0;
flex: 1 1 0;
}
.containerReviewFinal {
border-left: 5px solid red;
background-color: ghostwhite;
}
<div class="flexbox">
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div>
<p>4.8/5</p>
<p><i>Par critique 1</i></p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book
</p>
</div>
</div>
</div>
Solution 2
This guarantees that it will be one column per row on devices smaller that 800px width.
you can change the number to suit your needs.
.flexbox {
margin-top: 10%;
display: flex;
/*flex-wrap: wrap;*/
}
.image {
max-width: 100%;
}
.containerReview {
border-left: 5px solid red;
background-color: ghostwhite;
width: fit-content;
flex: 1;
}
.containerReviewFinal {
border-left: 5px solid red;
background-color: ghostwhite;
}
#media screen and (max-width:800px){/*change 800 to your break point */
.flexbox{
flex-direction:column;
}
}
<div class="flexbox">
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div>
<p>4.8/5</p>
<p><i>Par critique 1</i></p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book
</p>
</div>
</div>
</div>
You need to add media query for mobile device view.
#media screen and (max-width: 767px) {
.flexbox {flex-direction: column;}
}
Note:you can change max width according your design or breakpoint.
Related
i want to show image next to text. But its showing below it
Here is the code
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>This is my first post</h1>
<div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
<div class="col-md-4">
<img src="/media/post/Screenshot_from_2022-07-17_23-55-13.png" class="img-thumbnail" >
</div>
<div><a href="/blog/first-post" >Read More..</a></div>
<div class="col-md-8">
<h1>this is second post</h1>
<div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
<div class="col-md-4">
<img src="/media/post/0a61bddab956.png" class="img-thumbnail" >
</div>
<div><a href="/blog/2nd-post" >Read More..</a></div>
</div>
</div>
This is how it look like
EDIT. I copied this from view-source and some text is cut off there. Actually i am using Django jina 2 template code
{% for post in context %}
<div class="col-md-8">
<h1>{{ post.title}}</h1>
{{ post.content |truncatewords:20 | safe}}
</div>
<div class="col-md-4">
<img src="/media/{{post.image}}" class="img-thumbnail" >
</div>
<div><a href="/blog/{{post.slug}}" >Read More..</a></div>
{% endfor %}
Here is base.html file code
<div class="container">
<div class="row">
{%block content %}
{%endblock%}
</div>
</div>
I think truncatewords:20 is causing the issue.
Replacing it with truncatewords_html:20 resolved the issue
Use d-inline class on image and text.
The problem is with your HTML Code you didn't close the div of class col-md-8
Check now the code in large screen the text and image are next to each others
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>This is my first post</h1>
<div>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
</div>
<div class="col-md-4">
<img src="/media/post/Screenshot_from_2022-07-17_23-55-13.png" class="img-thumbnail">
</div>
<div>Read More..</div>
<div class="col-md-8">
<h1>this is second post</h1>
<div>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
</div>
<div class="col-md-4">
<img src="/media/post/0a61bddab956.png" class="img-thumbnail">
</div>
<div>Read More..</div>
</div>
</div>
I think a class="row" should not hold col sum greater than 12. Reformat your code like below.
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>This is my first post</h1>
<div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
<div class="col-md-4">
<img src="/media/post/Screenshot_from_2022-07-17_23-55-13.png" class="img-thumbnail" >
</div>
</div>
<div><a href="/blog/first-post" >Read More..</a></div>
<div class="row">
<div class="col-md-8">
<h1>this is second post</h1>
<div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
<div class="col-md-4">
<img src="/media/post/0a61bddab956.png" class="img-thumbnail" >
</div>
</div>
<div><a href="/blog/2nd-post" >Read More..</a></div>
</div>
I am using Bootstrap 4 and slick slider on my project. I need to show 3 column in card style. So i design the card and then tried slick-slider on it. Its working very well. When i tried to keep 1st card fixed and then use next 2 card for sliding. But its getting out of same row.I want all card in same row.
This is how i want:
But this is what i get when i tried:
Here is my code i use which not working:
jQuery(document).ready(function ($) {
$('.sp-carousel').slick({
dots: false,
arrows: true,
infinite: true,
speed: 300,
autoplay: true,
autoplaySpeed: 2000,
slidesToShow: 3,
slidesToScroll: 1,
prevArrow: '<button class="slide-arrow prev-arrow"></button>',
nextArrow: '<button class="slide-arrow next-arrow"></button>'
});
});
/* Specialist card details start */
.sp-wrapper{ width:100%;padding:1%;}
.sp-carousel{ width:90%;height:90%; margin:0px auto;}
.cardmain{ margin:10px;}
.cardmain hr {width:100%;background-color:#ADADAD;opcaity:0.1;margin:2px;}
.slick-slide img{ width:369px;height:385px;}
.slick-prev, .slick-next{background: #000;border-radius: 15px;border-color: transparent;}
.card{border: 2px solid #fff;box-shadow: 1px 1px 15px #ccc;}
.card-header {padding:0;}
.card-header img {width:100%;}
.card-body{background:#fff;width:100%;vertical-align:top;padding:10px;}
.card-content-sp{background:#fff;}
.card-content-sp h5 {color:#000000;font-weight:400;font-size:18px;line-height:1.3em;margin-top:-1px;margin-bottom:5px;padding:0;}
.card-title{color:#000000;font-weight:500;font-size:18px;line-height:1.3em;margin-top:0;margin-bottom:0px;padding:0px;}
.card-text{color:#747373;font-size:14px;font-weight:400;font-size:1em;line-height:1.5;margin:0px;margin-bottom:10px;padding:0;font-family:Roboto-Thin;height:145px;overflow:auto;}
/* Specialist card details End */
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
<!-- jQuery first then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<div class="sp-wrapper">
<div class="cardmain">
<div class="card">
<div class="card-header">
<img src="http://via.placeholder.com/369x385?text=dr-samim">
</div><a href="dr.html">
<div class="card-body">
<div class="card-content-sp">
<div class="card-title">DR SARKAR MAHBUB AHMED SAMIM</div><hr><h5>Consultant & Co-Ordinator</h5>
<div class="card-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
</div>
</div>
</div></a>
</div>
</div>
<div class="sp-carousel">
<div class="cardmain">
<div class="card">
<div class="card-header">
<img src="http://via.placeholder.com/369x385?text=dr-2">
</div><a href="dr.html">
<div class="card-body">
<div class="card-content-sp">
<div class="card-title">DR SARKAR MAHBUB AHMED SAMIM</div><hr><h5>Consultant & Co-Ordinator</h5>
<div class="card-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
</div>
</div>
</div></a>
</div>
</div>
<div class="cardmain">
<div class="card">
<div class="card-header">
<img src="http://via.placeholder.com/369x385?text=dr-3">
</div><a href="dr.html">
<div class="card-body">
<div class="card-content-sp">
<div class="card-title">DR SARKAR MAHBUB AHMED SAMIM</div><hr><h5>Consultant & Co-Ordinator</h5>
<div class="card-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
</div>
</div>
</div></a>
</div>
</div>
<div class="cardmain">
<div class="card">
<div class="card-header">
<img src="http://via.placeholder.com/369x385?text=dr-4">
</div><a href="dr.html">
<div class="card-body">
<div class="card-content-sp">
<div class="card-title">This is the Fourth slider</div><hr><h5>Consultant & Co-Ordinator</h5>
<div class="card-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
</div>
</div>
</div></a>
</div>
</div>
<div class="cardmain">
<div class="card">
<div class="card-header">
<img src="http://via.placeholder.com/369x385?text=dr-5">
</div><a href="dr.html">
<div class="card-body">
<div class="card-content-sp">
<div class="card-title">This is the Fifth slider</div><hr><h5>Consultant & Co-Ordinator</h5>
<div class="card-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
</div>
</div>
</div></a>
</div>
</div>
<div class="cardmain">
<div class="card">
<div class="card-header">
<img src="http://via.placeholder.com/369x385?text=dr-6">
</div><a href="dr.html">
<div class="card-body">
<div class="card-content-sp">
<div class="card-title">This is the Sixth slider</div><hr><h5>Consultant & Co-Ordinator</h5>
<div class="card-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.</p>
</div>
</div>
</div></a>
</div>
</div>
</div>
</div>
Here is the code which working well but i dont want exactly:
https://jsfiddle.net/mczkqv75/2/
How can i fixed the first slider or first card then make slider from 2nd card?
Try this:
.sp-wrapper {
display: flex;
}
.sp-carousel {
flex: 0 0 66.67%;
min-width: 66.67%;
max-width: 66.67%;
}
And change slidesToShow in your JS into 2:
slidesToShow: 2,
So I'm having a hard time aligning a button at the bottom of my Bulma's column.
I want the button "Buy" to be at the bottom of the right column (side by side with the button "Hello"). I'm in this situation because my other column content is longer.
So far I tried thoses CSS styles on my button (and none of them helped me):
vertical-align: bottom;
margin-bottom: auto;
position: absolute;
bottom: 0;
Here is my HTML:
<section class="section">
<div class="columns is-centered">
<div class="column is-one-fifth">
<h4 class="title is-4">I'm a big column</h4>
I'm taller than the column next to me so my column will be bigger, lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">Hello</button>
</div>
<div class="column is-one-fifth">
<h4 class="title is-4">I'm a small column</h4>
I'm a small column, and my button missplaced
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
</div>
</section>
Could you guys help me?
Thanks.
Alright, foud the answer : The Bulma column needs to have a few properties (suggested by #ahsan-ullah). Then the button needs to have an auto margin to top.
<section class="section">
<div class="columns is-centered">
<div class="column is-one-fifth item">
<h4 class="title is-4">I'm a big column</h4>
I'm taller than the column next to me so my button will be higher,lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">Hello</button>
</div>
<div class="column is-one-fifth item">
<h4 class="title is-4" style="align-self: flex-start;">I'm a small column</h4>
I'm a small column, and my button is well placed
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
</div>
</section>
.item{
display:flex;
flex-direction:column;
justify-content:space-between
}
.columns button{
margin-top: auto;
}
Result :
hope it is the answer for you work.
.maindiv{
width:200px;
height:180px;
border:1px solid red;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between
}
.innerdiv{
display:flex;
flex-direction:column;
}
button{
width:150px;
height:30px;
color:white;
background-color:blue;
border-radius:4px
}
<div class='maindiv'>
<h3>Mana Foutan</h3>
<span>lorem ipsum lorem ispum</span>
<div class='innerdiv'>
<i>Make it rain!</i>
<button>Buy</button>
</div>
</div>
You can use inline style margin-top:auto on the column div like this:
<div class="column is-one-fifth" style="margin-top: auto;">
<h4 class="title is-4">I'm a small column</h4>
I'm a small column, and my button missplaced
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
Alternately, probably preferably, add it as a custom style to your .css and use it as a class inline.
.css:
.valignbottom{
margin-top: auto;
}
html:
<div class="column is-one-fifth valignbottom">
<h4 class="title is-4">I'm a small column</h4>
I'm a small column, and my button missplaced
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
I am trying to create a layout using Flexbox where I have elements which consist of 3 other internal elements. The parent item element contains 3 divs: image, button, text. The issue is that my items will not always contain images or text that is the same height as the others. The button is the one thing that will have a consistent height. I am trying to figure out if it's possible to have each of my image divs be the same height as the tallest one and same for the text divs. I would also like the images to be vertically aligned to the bottom, so if one element has a shorter image, the white space to make the element the same height will go above the image like this:
And here is what I have so far:
.container {
display:flex;
flex-wrap:wrap;
flex-flow:row wrap;
justify-content:center;
}
.item {
max-width:200px;
margin:0 20px;
}
<div class="container">
<div class="item">
<div class="image">
<img src="http://placehold.it/150x300" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x200" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x250" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x270" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
I know that I could do this using Javascript to loop through each item to get the tallest and change the CSS of all others, but I'd like to use only CSS if possible. I also know that I could just set the height of the image container to the height of the tallest image, but these images are going to be dynamic and there are going to be a lot of them, so I'd rather have a solution that doesn't require hardcoding values.
Flexing the .item class and adding justify-content: flex-end; would provide the majority of the affect, but as far as I know you'd have to set a specific height on at least one of the items if you want two elements to be aligned the same across flexbox. Happy to be proven wrong though.
You could alternatively use margin-top: auto on the first child to push any unused space to the top and everything else down.
.container {
display:flex;
flex-wrap:wrap;
flex-flow:row wrap;
justify-content:center;
}
.item {
max-width:200px;
margin:0 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.text {
height: 36px; /* magic number */
}
<div class="container">
<div class="item">
<div class="image">
<img src="http://placehold.it/150x300" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x200" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x250" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x270" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
I'm just getting started with Bootstrap. Below is a snapshot of my page.
My CSS is
.snippet img{
width: 150px;
max-width: 100%;
height:auto;
}
#media(max-width: 767px) {
.snippet img{
width:100px;
float: right;
max-width: 100px;
height: auto;
margin-left: 10px;
margin-right: 10px;
}
}
And here is my HTML:
<h2>About the venue</h2>
<div class="media-body snippet" >
<a class="pull-right" href="venue.php">
<img src="images/venue.jpg" alt="illustration"></a>
<p>this is the paragraph ... </p>
</div>
I want the image to be hanging like that on big screen. However, on small devices I would like to get the text to wrap around the image. How can I do that?
Any help would be appreciated!
why you dont use this? its also smarter ;)
http://getbootstrap.com/components/#thumbnails-custom-content
EDIT
include code from bootstrap doc
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
YOu can try this
<style>
.snippet {width: 250px;}
.snippet img{ width: 150px; height:auto; float: left; }
</style>
</head>
<body>
<div class="media-body" >
<div class="snippet">
<a class="pull-right" href="venue.php"><img src="http://i.stack.imgur.com/Fa34B.png" alt="illustration"></a>
<p>this is the paragraph ... </p>
</div>
</div>
Try this
<div style="width: 150px;">
<img src="http://i.stack.imgur.com/Fa34B.png" align="left" width="100" height="100"> This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text
</div>
I just use the following: float is all that's needed, a bit of padding for visuals:
<div class="float-right pl-3 pb-3">
<img src="https://i.pinimg.com/474x/4a/c7/3b/4ac73b5c8ef5d397ab535ac1631642a7.jpg" class="shadow img-fluid">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
Add this line of css code
display:inline;
You have to add the following class to your html code: "img-responsive pull-left"
For example:
<img src="IMG/img.jpg" alt="about image" class="img-rounded img-responsive pull-left">