In typical situations, you can easily float an image left or right to wrap text around it. However, in flexbox layouts, floating elements do not work as expected and finding a solution can be challenging.
It is worth noting that Bootstrap 4 will be implementing flexbox for their new grid system. This may pose a problem if you need to have a block of text in a column layout while also having text wrap around an image.
Initially, it's important to understand that flexbox is distinct from a grid system and not meant to be a replacement for one.
Bootstrap 4 continues to offer a familiar grid system, but now includes the option to leverage certain advantages of flexbox in addition.
Regarding floats...yes, when you designate the parent element as display:flex, the direct children (flex-children or flex-items) are unable to be floated.
However, since the display property isn't inherited, your floated content will still wrap properly.
img {
float: left;
margin-right: 1em;
}
.col-md-6,
.col-sm-6 {
background: pink;
}
.row {
display: flex;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<img src="http://picsum.photos/40/40" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,
molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p>
</div>
<div class="col-md-6 col-sm-6">
<img src="http://picsum.photos/40/40" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,
molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p>
</div>
</div>
</div>One way to modify the positioning of an image in CSS is by utilizing the + selector.
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
h3 {
width: 100%;
}
.page-pic {
margin: 0 20px 0 0;
max-width: 200px;
}
.container .page-pic+p {
flex: 1;
position: relative;
top: -20px
}<div class="container">
<h3>Some Title</h3>
<img src="https://picsum.photos/id/1073/200/200" class="page-pic">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu ornare quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus molestie sodales ante a suscipit. Proin sed diam nisi. Nunc lobortis et nulla auctor varius. Cras dignissim,
metus sit amet aliquam posuere, ante magna pharetra justo, at mattis turpis purus non nibh. Quisque congue mauris id ligula fringilla fermentum. Morbi laoreet nec nulla non rhoncus. Etiam vitae tellus eget nunc finibus eleifend vel non ante. Nunc
odio odio, fermentum ac hendrerit non, consequat nec felis. </p>
<h3>Another Title</h3>
<p>Another Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu ornare quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus molestie sodales ante a suscipit. Proin sed diam nisi. Nunc lobortis et nulla auctor varius.
Cras dignissim, metus sit amet aliquam posuere, ante magna pharetra justo, at mattis turpis purus non nibh. Quisque congue mauris id ligula fringilla fermentum. Morbi laoreet nec nulla non rhoncus. Etiam vitae tellus eget nunc finibus eleifend vel
non ante. Nunc odio odio, fermentum ac hendrerit non, consequat nec felis. </p>
</div>Is there a way to prevent a website name from becoming a clickable link in Safari? In my marketing email, I am highlighting the websites of both my client and their competitor. When mentioning the competitor's site "sitename.com," I want to avoid cre ...
Currently, I am utilizing multiple CSS files for a specific purpose. The issue I am facing is that when I apply styles to one component in a CSS file, it inadvertently affects other components as well, not just the intended one. I believe the root of this ...
I have a specific table width of 776 pixels with three columns. The third column has a fixed width of 216 pixels, but the widths of the other two are unknown. I want the second column to adjust its width based on its content, and whatever space is left aft ...
Why does Material-UI rely on the "typeface-roboto" CSS module to load the Roboto font, even though they typically use JSS for styling components? Does this mix of JSS and CSS contradict their usual approach? ...
I have a data table where I declare rows and columns as simple variables, making it difficult to style them using 'style={{textAlign: center}}'. I tried adding a CSS file, but it did not work with the Material UI table. I am unsure of how to proc ...
My web page features a customized vertical scrollbar within a div box, and I have managed to create a horizontal scrollbar using CSS and jQuery. Now, I am looking for a way to match the color of the custom horizontal scrollbar with the rest of my design. ...
UPDATE: I recently discovered that I need to modify the body background-color, but I am unsure of how to accomplish this from within the style of this page based on the wrapper's class. The class is determined by the data values. I aim to change the ...
My task is to design a 3-grid layout that resembles the following structure: ------------------------------------- | Image | The name of logo | > | ------------------------------------- I attempted this using the code below: <div class=" ...
I am looking to increase the clickable area of my menu links. Currently, only a small part of the links is clickable and I want to know how to expand it. I have seen some CSS tricks using classes, but I also have an active class for these links. Can you ...
I've come across similar questions here, but none of the suggested solutions have worked for me. (I attempted making the image a background as recommended on how to display text over an image in Bootstrap 3.1, but it didn't seem to be effective) ...
JavaScript isn't my strong suit, so I'm struggling to solve this issue. The console is showing me the following error message: Uncaught TypeError: Cannot set property 'onclick' of null <script> var modal = document.getE ...
I am currently designing a bootstrap 4 layout with four columns, but starting with just three. I have an outer div container and an inner row with three columns. However, when I add borders to all the containers, I notice that the row does not expand to fi ...
Currently, I am facing an issue with two images not displaying correctly on a website that I am working on. The problem seems to be specific to IE 9, as other browsers are working fine. The trouble arises when I try to create a slideshow with a shadow back ...
I'm having trouble trying to align an image and some text side by side. Below is the code that includes an image and text (Name and Age), but they are not aligning properly even after using float: left. Can anyone help me with this? Thank you. < ...
I have implemented a responsive table design that collapses for smaller screens and displays the table header before each cell. body { font-family: "Open Sans", sans-serif; line-height: 1.25; } table { border: 1px solid #ccc; border-collapse: co ...
My goal is to make pagination easily accessible on mobile devices for users of my website, similar to UIScrollView with paging enabled in iOS. However, it's important that the website remains functional and visually appealing on desktops as well. I h ...
Currently, I have created a table populated with data fetched from a JSON file. Now, my focus is on implementing a search functionality that filters out items based on user input and displays only those table rows matching the search criteria. The code sni ...
let selector = document.querySelector('.activate') selector.addEventListener('mouseover', function(){ document.querySelector('#hidden-li').classList.remove("hidden") }) selector.addEventListener('mouseleave', f ...
Utilizing the bootstrap5 variant-button mixin, I aim to create a custom-colored button. While I have successfully altered the default hover effect color, I am encountering difficulty in setting the background color of the button itself. Upon inspecting the ...
Hey there, I've recently started my journey into web development and have encountered a roadblock. I'm trying to blur the background image of a div on hover without affecting the text inside. I have an id called c1 where I used a javascript func ...