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

Could LXML potentially determine the value of a class in HTML?

For instance, consider the following scenario: <button class="oW_lN oF4XW sqdOP yWX7d _8A5w5 ">MyTextIsHere</button> The "MyTextIsHere" part of the code can contain only two specific values: "Yes" and "No". Is it feasible to determine wh ...

pythonhtmlcssseleniumlxml

The static menu is malfunctioning and is disrupting the smooth operation of the website

I've created a custom Wordpress menu that should switch to a different layout when scrolling down. While the functionality works fine, I'm facing an issue where a portion of the page is lost every time the menu transitions from "relative" to fixe ...

jquerycssmenu

Verify if data is correct before refreshing user interface

When attempting to submit the HTML5 form, it stops the form submission if any required fields are missing a value or if there is another error such as type or length mismatch. The user interface then shows highlighted invalid fields and focuses on the firs ...

javascripthtmlcssvalidation

Using an HTML ellipsis without setting a specific width

I am working on achieving a specific layout as shown in the screenshot below. If both SPAN and B fit within the box, they should be displayed one after another. If they do not fit, SPAN should have an ellipsis while B is fully displayed (never larger tha ...

htmlcsshtml-tablewkhtmltopdfellipsis

Using CSS within the HTML code is effective, however, linking to an external CSS file is not working

I require assistance. This situation is absolutely absurd. Currently, I am utilizing Komodo IDE version 7.1.2 and Firefox version 15.0.1. The HTML5 file that I created looks like this: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

csshtmlfirefoxstylesheet

Achieve a CSS design similar to the Cinemax logo with angled background ends

Is there a way to customize the angle at which the ends of a background are cut off when using -webkit-transform: rotate(-#deg); and background selectors for tilted text with a background? I'm looking to achieve a design similar to the Cinemax logo. ...

csstransform

Compact selection box, vast information

My dilemma is having restricted space for a dropdown containing a considerable amount of text. Is it feasible to keep the dropdown width small while expanding the list popup size? Update: My browser of choice is Internet Explorer. ...

htmlcss

Instructions on how to export an HTML table to Excel or PDF by including specific buttons using PHP or JavaScript

I created a table to display leave details of employees with sorting options from date to date. Now, I need to include buttons for exporting the data to Excel and PDF formats. Check out the code below: <form name="filter" method="POST"> <in ...

javascriptphphtmlcss

What is the best way to update my logo and incorporate a colored border at the bottom of my fixed header while the user is scrolling down?

After spending countless hours researching online, I've been struggling to implement header effects on scroll without using JavaScript. My goal is to achieve a simple effect where the header reduces in height, the logo changes, and a colored border is ...

javascripthtmlcss

Creating dynamic color changes with overlapping SVG triangles using CSS

I'm facing a challenging issue: I want to change the color of an SVG line as it intersects with a triangular background created using CSS. Although I've experimented with gradients, they don't produce the desired effect. My goal is for the ...

htmlcsssvg

Creating Interactive Modals in Bootstrap using AJAX Requests

Currently, I am utilizing codeigniter v3 along with bootstrap v3. I have a table that displays messages, and when the details button is clicked for any message in the table, a bootstrap modal pops up to show the details. In my code, I iterate through t ...

ajaxtwitter-bootstrapcodeigniter

Creating a minigame using JQuery (Javascript)

I am currently developing a collection of mini-games for my big project. The approach I've taken in creating this mini-game is similar to one I used previously. However, unlike my previous version which only had one PuzzleContainer, this new iteration ...

javascriptjqueryhtmlcss

MacOS web browsers adjust content to fit the screen size

As I delve into React development, one thing that has caught my attention is how MacOS browsers try to fit all the page content in view rather than allowing users to scroll. Let me illustrate this with an example: function Example() { const Elements = ...

cssreactjsmacosmaterial-uioverflow

reduce the size of the image as the browser width decreases

Struggling with a webpage layout that features an image on the left and content area on the right, both with fixed widths. When reducing browser width, the image should not shrink but be cropped from the left side instead. Any solutions for this issue? ...

javascripthtmlcss

Label text facing positioning difficulties

Hey there! I have a goal in mind: https://i.stack.imgur.com/bnso9.png This is what I currently have: http://codepen.io/KieranRigby/pen/QyWZxV. Make sure to view it in "Full page" mode. label { color: #6d6e70; bottom: 0; } .img-row img { width: 10 ...

htmlcsstwitter-bootstrap

The Bootstrap popup fails to display when adding the bootstrap.min.css file

I am experiencing difficulties with CSS as I am relatively new to it. Currently, I am utilizing the bootstrap popup in the following example. Upon clicking the 'Full Spec' button, a popup box appears. However, it seems that the file bootstrap.mi ...

htmlcsstwitter-bootstrappopup

Button Menu in HTML

When you click the menu button, I want the text inside the class="greetings" div to change from "Welcome Jon deo" to just "G" So basically, whenever the menu button is clicked, display the letter G and hide or replace "Welcome Jon deo" Addition ...

htmlcssbootstrap-4

Picture not showing up when loading iPhone video

My website features a video that is displayed using the following code: <div class="gl-bot-left"> <video controls=""> <source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4" ...

javascripthtmlcssiphone

CSS flexbox completely collapses all child elements that are empty

Is there a way to collapse the empty "col" divs in this html structure while keeping the content divs equally sized (two columns in this case)? * { box-sizing: border-box; } .container { border: 1px dashed rgba(255, 0, 0, .5); background-color: b ...

htmlcssflexbox

The background-repeat property in CSS appears to cease functioning when the container becomes too wide

Exploring various combinations of space and round values for background-repeat, I've discovered a way to utilize radial gradients to create a visually appealing dotted border on an element without having the dots cut off. .test { background-repeat: ...

csssafaribackground-imagebackground-repeat