Place 2 images side by side within a row using Bootstrap's grid system

https://i.sstatic.net/RVBpK.png

Is there a way to center the images for the 2 app download links within the class="row" section?

<div class="container">
        <div class="row">
            <div class="col-xs-4" style="text-align:right"><img src="images/bear.png" alt="bear" /></div>
            <div class="col-xs-8 first-row-second-column">
                <div class="row">
                    <h3 class="col-xs-12" style="text-align:center">Welcome to</h3>
                </div>
                <div class="row">
                    <h3 class="col-xs-12" style="text-align:center">Subscribe today and get 7 DAYS FREE</h3>
                </div>
                <div class="row">
                    <h3 class="col-xs-12" style="text-align:center">If you are in Greece, send an SMS now from your mobile ZOU to 54790 and enter the world of Zouzounia.</h3>
                </div>
                <div class="row">
                    <h3 class="col-xs-12" style="text-align:center">If you live abroad, subscribe through the application.</h3>
                </div>
            </div>
        </div>
        <div class="row text-center">
            <div class="col-xs-12">
                <div><img src="images/app_store_logo.png" alt="app_store_logo" /></div>
                <div><img src="images/google_play_logo.png" alt="google_play_logo" /></div>
            </div>
        </div>
    </div>
htmlcsstwitter-bootstrap

Answer №1

Since there is no sample fiddle provided, it's hard to visualize the outcome; however, this code snippet should align with your desired layout.

<div class="container">
        <div class="row">
            <div class="col-xs-4" style="text-align:right"><img src="images/bear.png" alt="bear" /></div>
            <div class="col-xs-8 first-row-second-column">
                <div class="row">
                    <h3 class="col-xs-12"  style="text-align:center">Welcome to</h3>
                </div>
                <div class="row">
                    <h3 class="col-xs-12" style="text-align:center">Subscribe today and get 7 DAYS FREE</h3>
                </div>
                <div class="row">
                    <h3 class="col-xs-12"  style="text-align:center">If you are in Greece, send SMS now from your mobile ZOU to 54790 and enter the world of Zouzounia.</h3>
                </div>
                <div class="row">
                    <h3 class="col-xs-12"  style="text-align:center">If you live abroad, subscribe through the application.</h3>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-4"></div>
            <div class="col-xs-8">
                <img src="images/app_store_logo.png" alt="app_store_logo" />
                <img src="images/google_play_logo.png" alt="google_play_logo" />
            </div>
        </div>
    </div>

To display the two images side by side, I have removed the divs around them and utilized bootstrap to create an empty column on the second row to match the bear image above. If the images appear too close together, consider adding a margin rule in your CSS stylesheet.

Answer №2

For a hard-right alignment, simply include the .pull-right class Bootstrap

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

Are all the bootstrap columns displaying in a single row?

Despite my best efforts, I'm facing a puzzling issue as a newbie. I've meticulously set up the container > row > col structure in Bootstrap, but all my columns stubbornly remain on the same line. According to the Bootstrap guidelines, only ...

htmlcssbootstrap-4

The issue with grunt-contrib-compass not functioning properly within npm

I recently installed npm and grunt, followed by installing grunt-contrib-compass. However, when I try to run grunt, I encounter the following error: Running “compass:dist” (compass) task Warning: not found: compass Use –force to continue. Aborted du ...

csssassnpmgruntjscompass

Problems Arising from the Combination of Django and External JavaScript

I am currently working on a project that uses Django 1.11 and JavaScript, but I am encountering an issue. The JavaScript code works fine when run within the HTML file, as it successfully loads the JSON data. However, when I move everything to the static fo ...

javascripthtmljsondjango

How to display and download a PDF file on a JSP web page

Can anyone help me with a simple trick to solve this question I have? In my project folder, I have 5 PDF files named file1.pdf, file2.pdf, file3.pdf, file4.pdf, and file5.pdf. I want to display these files in 5 rows on my webpage, each row containing VIEW ...

javascripthtmljspprinting

Use the inline IF statement to adjust the icon class depending on the Flask variable

Is it feasible to achieve this using the inline if function? Alternatively, I could use JavaScript. While I've come across some similar posts here, the solutions provided were not exactly what I expected or were implemented in PHP. <i class="f ...

javascriptpythonhtmlflaskjinja2

Utilizing Bootstrap's hidden command to pinpoint specific titles

Here is the code I have that generates previous and next links for my Wordpress post. I am looking to hide the title of these links and instead display 'back' and 'next' as the text. The current code successfully hides the icon display ...

phphtmlwordpresstwitter-bootstrap

Store the show/not show status of the collapse item-1 class using either local storage or session storage

Having trouble maintaining the state of my collapsible items after a page refresh. I'm using bootstrap 5. To keep the accordion item open, you need to add show to the class. <div role="tabpanel" data-bs-parent="#accordion-1" cla ...

htmljquerybootstrap-5

Transferring data obtained from an API in node.js to display in an HTML table

I'm currently diving into node.js and development of a web application aimed at managing stock market portfolios for investors. One challenge I'm facing is figuring out how to transfer the data collected from an API to a specific table cell in HT ...

javascripthtmlnode.jsapiweb-applications

Reading Properties in VueJS with Firebase

<template> <div id="app"> <h1 id="title"gt;{{ quiz.title }}</h1> <div id="ques" v-for="(question, index) in quiz.questions" :key="question.text"> <div v-show="index = ...

javascripthtmlcssfirebasevue.js

Tips on keeping Bootstrap Modals out of your browsing history

Imagine this scenario A visitor lands on Page A, clicks through to Page B, and then engages with a link that triggers a modal (code provided below) <a href="mycontent.html" data-target="#modal_xl" data-toggle="modal" data-backdrop="static">Click me ...

javascriptjquerytwitter-bootstrap

Changing the display property causes ordered lists to shift towards the left

// Ensure the list is displayed when checked and hidden when unchecked. function toggleList(event) { let ol = document.getElementById('list'); if (event.currentTarget.checked) { ol.style.display = 'initial'; } else { ol.s ...

javascripthtmlcssalignmenthtml-lists

The footer seems to be losing its stickiness and not staying at the bottom when I

My goal is to create a sticky footer for my webpage. Once you click the add new sports button, a drawer slides out and the footer remains fixed at the bottom. However, as I scroll down the page, the footer moves up instead of staying in place. I have tried ...

javascripthtmlcssreactjsmaterial-ui

CarouFredSel Transition Troubles

I am currently using CarouFredSel to create an image carousel, but I am encountering some issues with the transitions between items. My goal is to incorporate simple HTML elements into the carousel instead of just plain images. However, when I attempt to ...

javascriptjqueryhtmlcsscaroufredsel

Recursive PHP function to create a category tree structure

I am facing an issue while trying to create a table of categories through recursive iteration of an array. The table generation works well when the depth increases, however, there seems to be a problem with the HTML output when the depth decreases. Below ...

phphtmlarraysrecursiontree

What is the best location to integrate jQuery UI Bootstrap in a Rails project

In order to use Bootstrap and jQuery UI together in my application, I decided to integrate jQuery UI Bootstrap. Unfortunately, many of the gems that handle asset pipeline integration seem outdated, so I opted to manually download the CSS files and insert t ...

jquerycssruby-on-railstwitter-bootstrapjquery-ui

Guide to making a post request with C++ and sockets for a C++ web scraper

In my quest to construct post requests using only C++ and sockets for my C++ web crawler, I am attempting to mimic various form clicks. My current challenge lies in determining the necessary components to include in the header and body of a basic http post ...

c++htmlhttpsocketspost

Animate your SVG with CSS using hover effects that originate from the center of the SVG

I successfully implemented this animation using GSAP and you can view the Codepen for reference: https://codepen.io/whitelionx/full/vYGQqBZ const svgs = document.querySelectorAll("svg"); svgs.forEach((svg) => { const tl = gsap .timelin ...

cssanimationsvghover

Tips for individually collapsing dynamic accordion panels within a Vue.js v-for loop

Is there a way to collapse accordions individually that are created inside a Vue.js v-for loop? I believe assigning a dynamic id to each accordion will help with this, but I am not sure where to add this id. Below is my HTML code: <div role="tablist"& ...

htmlvue.jsbootstrap-vue

I am experiencing difficulties with the PHP login form on MAMP as it is not loading properly, displaying only a

Having trouble with php not loading when I open my browser. Here is my database info: MySQL To manage the MySQL Database, you can use phpMyAdmin. If you need to connect to the MySQL Server from your own scripts, use these connection parameters: Host ...

phphtmlcssmamp

"Troubleshooting cross-domain issues with iframes in Internet Explorer

My application is built with angularjs and we offer the option to embed it on other websites. Everything works well in IE11, but when the application is iframed onto a different domain's website, it stops working. I've tried adding <meta htt ...

angularjshtmliframeinternet-explorer-11meta