`Locating an image alongside text for seamless integration`

Take a moment to view the image displayed below

Feature 1 and feature 4 are two distinct divs that I have styled with the Bootstrap class .col-md-4

Here is the corresponding HTML code

<div class="col-md-4">
    <div class="feature-group-1">
        <div class="feature-1">
            <div class="feature-1-img">
                <img src="images/cloud.png"/>
            </div>
            <div class="feature-1-writing"> 
                <h4>Feature 1</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
            </div>  
        </div>
        <div class="feature-2">
            <div class="feature-2-img">
                <img src="images/fork.png"/>
            </div>
            <div class="feature-2-writing">
                <h4>Feature 4</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
            </div>
        </div>
    </div>  
</div>

As both blocks reside within the same .col-md-4 div in Bootstrap, I am struggling to align the text and image side by side.

I am looking for an outcome similar to this:

Could anyone offer guidance on how to position two divs - one containing an image and other text - alongside each other using the same Bootstrap class? I have attempted using inline methods, floats, etc. without success.

Thank you in advance

htmlcsstwitter-bootstrap-3

Answer №1

Could you please provide the CSS code for feature-1, feature-1-img, and feature-1-writing?

UPDATE

Here is a basic CSS template to get you started. I have set fixed widths, but feel free to adjust to percentages if it suits your requirements better.

body {
    background-color:#42B8DC;
    color: #fff;
    min-width:850px
}

h4 {
    padding: 0;
    margin: 0;
}

.services {
    float:left;
    width:200px;
    font-size:30px;
    padding-left:20px;
    border-bottom:3px solid #fff;
}

.feature-1, .feature-2 {
    width:300px;
    height:128px; /* height of cloud img */
    float:left;
}

.feature-1-img, .feature-2-img {
    float:left;
}

.feature-1-writing, .feature-2-writing {
    height:128px; /* height of cloud img */
}
<div class="services">
    OUR<br/>SERVICES.
</div>
<div class="col-md-4">
    <div class="feature-group-1">
        <div class="feature-1">
            <div class="feature-1-img">
                <img src="http://cdn-img.easyicon.net/png/11136/1113608.gif"/>
            </div>
            <div class="feature-1-writing"> 
                <h4>Feature 1</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
            </div>  
        </div>
        <div class="feature-2">
            <div class="feature-2-img">
                <img src="http://cdn-img.easyicon.net/png/11136/1113608.gif"/>
            </div>
            <div class="feature-2-writing">
                <h4>Feature 4</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
            </div>
        </div>
    </div>  
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Performance problems arising from use of Tailwind CSS drop-shadow class

Lately, I've been struggling to pinpoint the root cause of a drastic FPS drop in my application. The issue arises after using the app for some time, leading to a performance plunge down to around 10FPS. After investigating, I discovered that eliminati ...

cssvue.jstailwind-css

Combine several elements in a single jQuery scrollreveal function

I am currently working on a webpage that utilizes the jQuery library plugin scrollreveal to gradually reveal different html elements when the page loads. The functionality of the code is working correctly at the moment, but I have noticed that there is a d ...

javascriptjqueryhtml

Javascript and iframes may encounter compatibility issues with browsers other than Internet Explorer

My HTML file includes an iframe and JavaScript that function correctly in IE Browser, but they do not work in other browsers such as Safari and Firefox. When using Safari, only the iframe box is displayed without showing the content inside it. I am curio ...

javascripthtmliframesafaricross-browser

When working with Vuejs, if you try to use "axios" in a .js file, you may encounter an error

I am currently working with VueJS and attempting to send a GET request to my API. I am using axios, but encountering an issue when trying to import it. If I use require for the import, I receive this error: Uncaught ReferenceError: require is not defined. ...

javascripthtmlvue.jsaxiosget

Prevent elements from overlapping within a flexbox container

I've encountered an issue with resizing the window causing the logos to overlap the portrait image. Is there a way to fix the logos relative to the portrait? Below is the code: /* Defaults for Main Part of Pages */ body, div, h1, p { margin: 0; ...

htmlcss

What is the best way to ensure my image adjusts its width and height responsively?

How can I make my image responsive to the size of the container, adjusting not just the width but also the height to fit in a container with a max-width of 1300px? I have created a test image with dimensions of 400px height and 1300px width. Take a look a ...

css

Choosing Issues

My selectpicker is displaying data outside the dropdown menu before making a selection. The data appears both inside and outside of the dropdown. Can someone please help me identify the issue and guide me on how to fix it? <select class="selectpick ...

javascriptphphtmljquerycss

What is the best way to incorporate this video into this particular frame?

Does anyone know how to insert an image with a specific shape using SVG? I have the exact shape I want in an SVG file. Do I need to use relative or absolute positioning with respect to the SVG, or are there other solutions available? <svg width="90 ...

csssvg

Tips for concealing a parent element while inside a span with jquery

Beginner asking for help! Take a look at what I've coded: <div class="Links"> <a href="/testthis1.html" data-id="button1"> <img class="icon" src="/test1.png" alt="test1"> <span>Test 1</span> < ...

jqueryhtmlhideparent

What is preventing me from assigning all padding values at once?

I attempted to modify all paddings of the html element using JavaScript, with the following code: const pd = 1 document.getElementsByClassName('board')[0].style.paddingRight = pd + 'px' document.getElementsByClassName('board') ...

javascripthtml

Favicon not displaying on the webpage

I am running a website and I want to add a favicon, but for some reason, it is not displaying correctly. When I view the site on my local server, it just shows a cloud symbol, and when I open the HTML file directly in a browser, it doesn't show any fa ...

htmlfavicon

Do you think it's achievable to modify the color using CSS's order attribute?

When I look at the code in Firefox's inspector, I notice this : element { order:35; } Can a color be assigned to it? I am customizing my year outlook calendar and have set a particular day to display in a different color. But when I click on the mo ...

htmlcsstags

What is the best way to have react-bootstrap's Dropdown automatically open when hovering your mouse over it?

Looking for a simple solution. I want the dropdown to open when hovering over it, rather than clicking on it. Here is my current code: <Nav> <NavDropdown onMouseEnter = {()=> isOpen=true} open={isOpen} noCare ...

javascriptcsstwitter-bootstrapreactjsweb

Increase the spacing between rows and columns in Bootstrap

Is there a way to create gaps between rows and columns in bootstrap without disrupting the layout? I am trying to have three columns on each row by using col-4, but when I try to add margin or padding, it messes up the design. My goal is to achieve a layo ...

cssbootstrap-5

Tips on utilizing toggleClass to display only the currently active item and obtaining the active class name

I am new to Jquery and CSS/scss and I have successfully created a dynamic boostrap card that resembles a record player. The goal is to generate multiple boostrap cards based on the data in DB, but for simplicity, I am showing only 2 examples below. My ques ...

jquerycssjquery-ui

extract various information from a csv file

Having trouble reading items from a CSV file and adding them to an input form? When using a specific option value that allows you to add items by pressing comma, it doesn't work when reading from the .csv file. What could be causing this issue? with ...

htmlpython-3.xcsvflask

NodeJS is facing a severe challenge in properly rendering HTML and its accompanying CSS code, causing a major

Once upon a time, I built a beautiful website while practicing HTML, CSS, and JS. It had multiple web pages and used Express for the backend. Unfortunately, I lost all the files associated with it and took a break from web programming for some time. Now, w ...

javascripthtmlcssnode.jsexpress

What is the correct way to markup the semantic form label assistance text?

When designing a form, there are certain form elements that may need explanatory text to clarify their function. One approach is to wrap this text in a paragraph element, as demonstrated below: label p { margin-top: -1px; font-size: smaller; } <div ...

htmlsemantic-markup

How can you retrieve attributes from a specific element within a dropdown menu?

I came across this intriguing HTML code snippet: <select id="selectSomething"> <option id="4" data-name="tomato" data-email="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfbba0a2aebba08fbbe1aca0a2">[email ...

javascriptjqueryhtmlselect

Changing color of the collapsible icon and content when hovered over

Currently, I am working on creating collapsible content for a FAQ dropdown. The button has a 'plus' icon which changes to a 'minus' icon when clicked. My goal is to change the color of the pre-clicked 'plus' icon to white when ...

htmlcssbuttoncollapsable