Create a webpage layout using Bootstrap that features a left-aligned image within a div, with

Is there a way to achieve this layout using Bootstrap?

View the desired design

I am looking to create a div with an image on the left (float:left) and text (which could be one or multiple lines) along with a button aligned to the bottom right. The goal is to have the button consistently positioned in that spot regardless of the length of the text.

Thank you for any assistance (apologies for any language errors)

edit : I have used the following HTML code with Bootstrap v3.3.7 (CSS) 

              <div class="col-lg-6" style="text-align: right; ">
                <img src="http://placehold.it/150x150" class="pull-right">
                <h1>Ipsum</h1>
                <p><b>Ipsum dolor</b></p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quidem voluptatibus consequatur
                </p>
                <button>consectetur</button>
              </div>

              <div class="col-lg-6" style="text-align: left; ">
                <img src="http://placehold.it/150x150" class="pull-left">
                <h1>Dolor</h1>
                <p><b>Dotum dolor</b></p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quidem voluptatibus consequatur
                </p>
                <button>consectetur</button>
              </div>

            </div>

Access the jsfiddle link here

csstwitter-bootstrapcss-floattwitter-bootstrap-2

Answer №1

To achieve the desired layout, you cannot solely rely on Bootstrap 3.3.7 classes as they use floating instead of the flex box model which is needed in this case.

Here is a solution using the Flexbox Model:

.flex_row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-line-pack: stretch;
        align-content: stretch;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.article {
    box-sizing: border-box;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 50%;
            flex: 1 1 50%;
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    padding: 10px;
}

.content {
    box-sizing: border-box;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    -ms-flex-item-align: stretch;
        align-self: stretch;
    padding: 0 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}

.textBlock {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
}

.buttonBar {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}

.onLeft {
    text-align: right;
}

.onRight {
    text-align: left;
}

.image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    background-color: grey;
    width: 150px;
    height: 200px;
}
<div class="flex_row">
    <div class="article onLeft flex_row">
        <div class="content">
            <div class="textBlock">
                <h1>Dolor</h1>
                <p><b>Dotum dolor</b></p>
                <p>
                  Lorem ipsum dolor sit amet, con tatibus consequatur
                </p>
            </div>
            <div class="buttonBar">
                <button>myButton on left</button>
            </div>
        </div>
        <div class="image"></div>
    </div>

    <div class="article onRight flex_row">
        <div class="image"></div>
        <div class="content">
            <div class="textBlock">
                <h1>Ipsum</h1>
                <p><b>Ipsum dolor</b></p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quidem voluptatibus consequatur
                </p>
            </div>
            <div class="buttonBar">
                <button>myButton on right</button>
            </div>
        </div>
    </div>
</div>

Below is my vanilla CSS for achieving the same result:

.flex_row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
}

.article {
    box-sizing: border-box;
    flex: 1 1 50%;
    align-self: stretch;
    padding: 10px;
}

.content {
    box-sizing: border-box;
    flex: 1 1 auto;
    align-self: stretch;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.textBlock {
    flex: 1 1 auto;
    align-self: stretch;
}

.buttonBar {
    flex: 0 0 auto;
}

.onLeft {
    text-align: right;
}

.onRight {
    text-align: left;
}

.image {
    flex: 0 0 auto;
    background-color: grey;
    width: 150px;
    height: 200px;
}

Answer №2

<div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="col-md-8">
                        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique velit eu massa ultricies vulputate.</p>
                        <button class="btn btn-primary pull-right">Click Here</button>
                    </div>
                    <div class="col-md-4">
                        <img img src="http://placehold.it/150x150" alt="Sample Image">
                    </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="col-md-4">
                        <img img src="http://placehold.it/150x150" alt="Another Image">
                    </div>
                    <div class="col-md-8">
                        <p> Nulla facilisi. Nam molestie mi at felis porttitor ornare. Etiam eget malesuada eros.</p>
                        <button class="btn btn-info pull-left">Learn More</button>
                    </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

CSS - Organization of Rows and Columns

I am in the process of designing a website that will feature news content, and I would like to give it a layout similar to a reddit news box. The layout would resemble the following structure. I am using angular material and CSS exclusively, without any fr ...

htmlcss

Fonts appear altered on a Windows computer

Working on my new website watr.io, I've noticed that the font appears differently on Windows versus Mac. The one displayed on Mac is the desired outcome, but I can't seem to figure out what's causing the discrepancy. I've been troublesh ...

htmlcssmacostwitter-bootstrap

Padding on hover for navigation bar dropdowns

Having issues with a drop-down navigation menu that works fine except for the "videos" item. The hover color change doesn't cover the entire width due to padding settings. Struggling to fix this without affecting the "photography" item. Need help figu ...

htmlcss

Gatsby causing issues with Material UI v5 server side rendering CSS arrangement

I shared my problem on this GitHub issue too: https://github.com/mui-org/material-ui/issues/25312 Currently, I'm working with the Gatsby example provided in Material UI v5: https://github.com/mui-org/material-ui/tree/next/examples/gatsby After imple ...

javascriptcssreactjsmaterial-ui

Problem regarding the widths of HTML <table> elements

I am working with a <table> that has 3 columns structured as follows: table { border: 1px dashed goldenrod; } td { border: 1px solid gray; } <table> <tr> <td width="120">Some content</td> <td width="150"> ...

htmlcsshtml-table

Is there a way to reverse the hover effect on div elements?

Let's start by examining the code I've written: HTML: <div class="button_container"> <div class="inner_button"> <a href="#" class="button_text">Button</a> </div> <div class="button_side"> ...

javascriptjqueryhtmlcsshover

Unbelievable attribute: sup causing peculiar styling in link element

We've recently come across an issue where the text-decoration of an underline in an anchor tag appears strange when there is a sup element present. The visual glitch looks like this: For reference, here's the HTML structure we are working with: ...

htmlcss

Sliding Up Transition Effect for Footer with JQuery or CSS3

I am attempting to replicate a sleek slide up footer that caught my eye on The Internship Movie Site. I have created the wireframe layout, but I am struggling to figure out the correct CSS transition effect. Although I have experimented with the "top" and ...

jqueryhtmlcss

Troubleshooting the inability to set percentage values in Bootstrap styling

My goal is to create a bar with thin bars, but my use of Bootstrap limits my control over sizes. <template> <div class="container-fluid mx-auto"> <div class="row"> <div class="square rounded-pill&qu ...

htmlcssvue.jsbootstrap-4bootstrap-5

Tips for choosing the parent's parent and applying a width of 100%

I am currently facing some challenges while creating a simple navigation bar from scratch. I am struggling with setting specific widths, especially wanting .navbarDropBtn to align its width with .navbarMain. However, it seems to only match the width of the ...

htmlcss

scraping text content from a CSS node using Scrapy

My goal is to extract a catalog ID number from the following webpage: from scraping.selector import Selector from scraping.http import HtmlResponse url = 'http://www.enciclovida.mx/busquedas/resultados?utf8=%E2%9C%93&busqueda=basica&id=& ...

pythoncssscrapy

Refrain from engaging with "disabled" table rows to prevent user interaction

I have an HTML table with certain rows marked as 'disabled'. To make this clear to the user, I decided to apply a blur filter to the tr, resulting in a table that looks like this: https://i.stack.imgur.com/GcX67.png NOTE: You can view a live ex ...

htmlcss

The presence of ng-show dynamically adjusts the minimum height of a div element

I am encountering an issue with a div that has the class of wrapper. Inside this div, there is a parent div with the class of content-wrapper. The wrapper div includes a conditional directive ng-show which toggles between displaying or hiding its content. ...

javascripthtmlcssangularjs

Is there a way for me to utilize the Bootstrap carousel without it adjusting the height as the user transitions from slide 1 to slide 2?

body{ background-color: #CAF7E3; } .container-fluid{ padding: 3% 15%; } .navbar{ font-family: 'Montserrat'; font-weight: bold; } .navbar-brand{ font-size: 2.5rem; } .nav-item{ margin-right: 2rem; } #title{ padding: 8% 15%; backgr ...

htmlcss

Struggling with aligning an image and text side by side in CSS

Struggling to get my text and image perfectly aligned horizontally? Despite being aligned, the image makes it seem otherwise. https://i.stack.imgur.com/u1QOh.png CSS Code: /* Copyright © 2016 Dynavio Cooperative */ .navbar { width: 100%; border ...

htmlcssimagecentervertical-alignment

What is the best way to alter the background of a div when hovering over an image?

I am looking to achieve a unique effect with my thumbnail image and background. Currently, I have the thumbnail image inside a div with another image serving as the background to frame it. My goal is to change the position of the background image from bott ...

jquerycss

Trouble with setting HTML table width

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <table border="1" width="100%"> <tr> <td>bbbbbbbbbbbbbbbbbbbbbbbbbbb ...

htmlcsswidthhtml-table

Is there a way to customize the font size of Material UI Autocomplete?

I'm currently trying to customize the Material UI Autocomplete component with my own CSS. Specifically, I aim to adjust the font size of the input field. Below is my current implementation: <Autocomplete style={{ width: 200, height: 60, ...

cssreactjsmaterial-ui

Enhancing Your Images with jQuery

Hello When working with jQuery, the following code can be used to darken an image. On the contrary, how would you go about brightening up an image? $(this).hover(function() { $(this).stop().animate({ opacity: 0.5 }, 500); }, function() { $(thi ...

jquerycss

What is the best way to target specific elements within my array using Jquery?

I have a Wordpress website where the posts contain images with the .aligncenter class. I want to style the images that are less than 400px in width by adding the display:inline-block; property and reducing their size to 40%. Here is the approach I tried: ...

jquerycss