I need to make text wrap around image with bootstrap 4 wihout floats, is it possible?
Here my code:
<article class="row single-post mt-5 no-gutters">
<div class="image-wrapper col-md-6">
<?php the_post_thumbnail(); ?>
</div>
<div class="single-post-content-wrapper p-3">
<?php the_content(); ?>
</div>
</article>
Here what I have now:
Here what I need to have:
I need to make text wrap around image with bootstrap 4 wihout floats, is it possible?
No, in this case, you must use the float-left class for the image. But you don't have to use any wrapper for the image. You can get rid of that wrapper div entirely and add your classes to the image.
Another thing you absolutely must do:
Put all of your content into Bootstrap columns because only Bootstrap columns may be the direct children of Bootstrap rows.
Here's a working code snippet (note: I left the image wrapper div in there but I recommend you get rid of it because that's totally unnecessary code. Add your classes directly to the image):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<article class="row single-post mt-5 no-gutters">
<div class="col-md-6">
<div class="image-wrapper float-left pr-3">
<img src="https://placeimg.com/150/150/animals" alt="">
</div>
<div class="single-post-content-wrapper p-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
</div>
</div>
</article>
</div>
Updated for Bootstrap 5.0
<div class="container">
<article class="row mt-5 no-gutters">
<div class="col-md-6">
<div class="image-wrapper float-start pe-4 ">
<img src="https://placeimg.com/150/150/animals" alt="">
</div>
<div class="single-post-content-wrapper p-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
</div>
</div>
</article>
<div class="row">
<div class="col-lg-2 col-12">
<div class="icon mb-4 text-center"><i class="fa fa-github"></i></div>
</div>
<div class="col-10">
<h4 class="h4">Title</h4>
<p class="text-muted">Some text here</p>
</div>
I have used this in bootstrap 4.
Why don't you use something like this:
<div class="container">
<img src="img/example.png" align="left" width="50%">
<p>Text here</p>
</div>
Simpe
align="left"
will do the job!
Related
New to Bootstrap and using version 5-2-0
In my layout I wanted to have the image of the cat take up one side and then have the content and form on the other size (content first then form underneath) but I can't get it to work.
<div class="grid">
<div class="g-col-6 g-start-1">
<img src="http://placekitten.com/g/200/300" alt="kitty kitty">
</div>
<div class="g-col-6 g-start-6">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
</div>
<div class="g-col-6 g-start-6">form</div>
</div>
Codepen:
https://codepen.io/emmabbb/pen/ExRmgZE
This should do.
Code:
<div class="row">
<div class="col-6">
<img src="http://placekitten.com/g/200/300" alt="kitty kitty">
</div>
<div class="col-6">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
<div>form</div>
</div>
</div>
In you're code, you were missing the stylesheet for https://getbootstrap.com/docs/5.2/assets/css/docs.css.
Also you need to start from g-start-7 (instead of g-start-6) as 1-6 is for the first column and 7-12 is for the second columns
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<div class="grid">
<div class="g-col-6">
<img src="http://placekitten.com/g/200/300" alt="kitty kitty">
</div>
<div class="g-col-6 g-start-7">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
</div>
<div class="g-col-6 g-start-7">form</div>
</div>
See more details here: https://getbootstrap.com/docs/5.2/layout/css-grid/#how-it-works
i have the problem with tailwind that the w-96 show correct and w-86 show not correct, what is the problem ?
<body>
<div class="mx-auto mt-20 mx-10">
<div class="mx-auto justify-center w-98">
<img class="" src="/image-product-mobile.jpg" alt="" srcset="" />
<h1 class="font-bold">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Incidunt, accusamus.</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Cupiditate praesentium eius deserunt aliquid cum saepe quod nemo provident magni modi.</p>
</div>
</div>
</body>
</html>
here the picture
w-86 is not a Tailwind class.
https://tailwindcss.com/docs/width
See the section on "Customizing your theme" and "Arbitrary values" on the above link.
I'm trying to figure out how to dynamically calculate the width and padding-left within a custom div within a bootstrap "container-fluid".
The setup looks like this:
<div class="container-fluid">
<div class="row">
<!-- Text - Slider component -->
<div class="container-fluid">
<div class="row">
<div class="col-6 text"></div>
<div class="col-6 slider"></div>
</div>
</div>
<!-- Text - Slider component -->
<div class="container">
<div class="row">
<div class="col-12 text-to-line-up-with">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, totam.
</div>
</div>
</div>
</div>
</div>
Within the text-slider component I would like the col-6 "text" to lineup with the text asif it lives in the regular 'container'.
I understand that I need to use some sort of calc() for the padding-left and width, but I can't wrap my head around this.
Any help or suggestions are very much welcome!
Disclaimer, this is an old project, which is still using bootstrap 3, and I can't change the html structure.
I also made a codepen to give a better picture
You don't have to calculate the width. The solution can be much easier with simply adding linear-gradient to your container-fluid background.
The HTML code structrure looks like this:
<div class="container-fluid red-blue py-4">
<div class="row">
<div class="container">
<div class="row">
<div class="col-6 red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
<div class="col-6 blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
</div>
</div>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-6 red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
<div class="col-6 blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
</div>
</div>
And the CSS:
.red-blue {
background: linear-gradient(to right, red 50%, blue 50%,blue 100%);
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
Hope this helps.
Basically, we must have this layout where in an image must spill out of the container and the text fills in the space created by the image (that is offset to the left).
We currently have this structure:
<div class="container">
<div class="row">
<div class="col">
Some paragraph
</div>
<div class="row">
<div class="col-5 body-img-col">
<div class="body-img-wrap">
<img src="images/some-image.jpg" alt="" />
</div>
</div>
<div class="col-7">
Some paragraph
</div>
</div>
<div class="col">
Some paragraph
</div>
</div>
</div>
Where body-img-wrap img is set to margin-left: -100px;. However, there's a gap that the image creates and the text won't fill it in as it's not in the same column. What we need is for the text to fill in the gap that the image creates when it's offset to the left.
How do we achieve this kind of layout?
Here is my solution,
I divided the image and text into 2 section, Then I gave the width to the text-section equal to width of the image using
width: calc(100% - 200px);
.left-sec {
width: 200px;
height: auto;
}
.right-sec {
width: calc(100% - 200px);
padding-left: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container">
<div class="row">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem error voluptas perspiciatis, possimus temporibus repudiandae facilis. Reiciendis eius eveniet voluptas est sapiente deserunt veritatis, eos earum et. Beatae, quae eaque.
</div>
<div class="row">
<img class="left-sec" src="https://placehold.it/200x200" alt="" />
<div class="right-sec">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ab, quaerat. Necessitatibus adipisci doloremque optio aperiam placeat quis laudantium, quos quia iste hic qui rerum architecto quibusdam dolor? Perferendis, iure.
</div>
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, officia, consequatur. Commodi fugit, soluta tenetur cumque eum laboriosam unde, expedita nemo eos. Praesentium velit quam itaque vel harum sit odit.
</div>
</div>
</div>
</div>
<aside class="col-md-3 pull-left" style="display:table;position: absolute;height: 100%;">
<div class="row" style="display:table-cell;vertical-align: middle">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel 1</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body" style="height:700px;overflow:scroll;">
<!--Panel content lorem Impsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod repudiandae adipisci ex officia numquam fugiat architecto voluptatum provident. Suscipit neque consectetur laudantium, doloremque fuga quaerat assumenda. Tempore laudantium quos reiciendis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, quis! Odit quam, fugit voluptates beatae dolor quod, aliquam recusandae, nemo impedit aliquid distinctio ratione. Nostrum quae praesentium nemo dignissimos tenetur-->
<dl>
<dt>Music</dt>
<dd>weekend hobby classes</dd>
<hr>
<dt>Digital Marketting</dt>
<dd>Email-Social media,Analytics </dd>
<hr>
<dt>Java</dt>
<dd>Programming classes</dd>
<hr>
<dt>Music</dt>
<dd>weekend hobby classes</dd>
<hr>
<dt>Digital Marketting</dt>
<dd>Email-Social media,Analytics </dd>
<hr>
<dt>Java</dt>
<dd>Programming classes</dd>
<hr>
<dt>Music</dt>
<dd>weekend hobby classes</dd>
<hr>
<dt>Digital Marketting</dt>
<dd>Email-Social media,Analytics </dd>
<hr>
<dt>Java</dt>
<dd>Programming classes</dd>
<hr>
</div>
</div>
</div>
</aside>
you have given height: 700px for panel-body. try to give a little more content and replace overflow: scroll to overflow: auto;