How to efficiently align images in Rails using Bootstrap styling

I've been attempting to center and enlarge two images by creating a class and modifying the stylesheets/scss, but so far, I haven't had any success. Below is the HTML code:

<div class="row" class="testimoinal_image">
    <div class="col-md-5">
        <%= link_to image_tag("south_london.jpg", class:"south_london")%>
    </div>
    <div class="col-md-2">
    </div>
    <div class="col-md-5">
        <%= link_to image_tag("statravellogo.jpg", class:"statravellogo"), "https://http://www.statravel.co.uk/", :target => "_blank"%>
    </div>
</div>

My goal is to use the .south_london class to adjust size and position, and the .statravellogo class to make further modifications, however, my attempts in the stylesheet have not yielded the desired results:

.testimonial_image{
max-width: 15rem;
text-align: center;
}

.south_london{
    max-width: 20rem;
    float: center;
}

.statravellogo{
    max-width: 15rem;
    text-align: center;
}

If you have any insights or suggestions, please let me know!

Answer №1

According to Michael Coker, using the property float: center; is not considered valid.

If you are utilizing bootstrap, you can leverage the offsets provided by the bootstrap grid system to position your two images in the center of the page.

This sample HTML5 code shows how this can be achieved:

<div class="row" class="testimoinal_image">
    <div class="col-md-offset-4"></div>
    <div class="col-md-offset-4">
       <%= link_to image_tag("south_london.jpg", class:"south_london")%> -->
       <%= link_to image_tag("statravellogo.jpg", class:"statravellogo"), "https://http://www.statravel.co.uk/", :target => "_blank"%>
    </div>
    <div class="col-md-offset-4"></div>
</div>

Additionally, here is the corresponding CSS code:

.testimonial_image{
    text-align: center;
    }

    .south_london{
        max-width: 20rem;
    }

    .statravellogo{
        max-width: 15rem;
        text-align: center;
    }

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

Is the CSS after-before property not functioning properly?

In my CSS code, I am utilizing the after and before tags. This is the structure of my div. However, I am facing an issue where my after tag is not functioning as expected. While everything else seems to be working fine, the after and before tags are not di ...

sophisticated adhesive manipulation

I am in the process of making certain elements sticky or fixed within an Angular project. Thus far, I have successfully managed both static and dynamic elements. The left menu remains static while the main content will be dynamic. The main content include ...

HTML string decoded incorrectly in CodeIgniter due to encoding error

When I send data that includes an HTML string along with other information from JavaScript to the PHP (Codeigniter) server using AJAX and JSON, I notice that the style information within the HTML string is missing once it reaches the server. Everything els ...

How can Puppeteer be configured to replicate the exact layout of an HTML document for PDF generation, including page breaks?

Currently, I am utilizing Puppeteer in order to create PDF files by using static HTML as the primary source: const page = await browser.newPage(); await page.setContent(html); //the HTML content is retrieved from the file system const pdf = await page.pdf ...

Sending HTML files using JSON responses in Ruby on Rails

Recently, I encountered an issue parsing JSON responses that contain HTML injections. [{"Date":"\/Date(1316445326553+0400)\/", "Dishes":null,"Id":103,"Name":"Menutka уже с Вами!", "PictureId":130144, "TextHtml":"<!DOCTYPE html PUB ...

jQuery load() function running very slowly

My jquery call to load a page sometimes takes about 30+ seconds, while other times it loads quickly as expected. To troubleshoot this issue, I attempted to replicate it in jsfiddle due to the complexity of the actual page's code. However, I was unsucc ...

HTML is appearing as unformatted text on the screen

I am utilizing deta for rendering cloud-based HTML content. Below is the code snippet in use: from deta import Deta from fastapi import FastAPI, Request, Response, Form, File, UploadFile from fastapi.templating import Jinja2Templates from fastapi.response ...

My JavaScript code runs perfectly fine on JSFiddle, but for some reason, it's not functioning correctly on

I need a solution where a new button is generated every time the post button is clicked, and each of these buttons should have its own counter. This works successfully in JSFiddle, but unfortunately doesn't work when I try to implement it elsewhere. ...

Issues arise when Angular animations fail to function properly due to the addition of styles through the [ng

Exploring Angular animations and seeking advice. Currently, I am utilizing ngStyle to show or hide text on hover. The goal is to smoothly animate the text as it appears on the screen. Are there alternative methods to achieve the same hover effect without r ...

Resolving Issues in HTML and the Dynamic Duo of PHP and MySQL

Hey there, I've been a reader for a while now but this is my first time posting. I'm really into PHP and I've been working on a page lately. Right now, I've got the DB connection set up nicely and my SELECT statement is doing exactly wh ...

Transmit an HTML table to PHP

I have successfully created a dynamic table within a form, but for some reason, it's the only element that is not being fetched. To build this table, I utilized the bootstable framework which allows for easy creation of tables with interactive featur ...

Center-aligned Bootstrap column with a width of 50% and centered vertically

I am looking to have images and videos displayed side by side on my webpage. The code below functions properly, however there is an issue with the alignment. While the horizontal center alignment is correct, the video and images are not centered vertically ...

Ensuring the Accuracy of User Input within Bootstrap's jQuery Modal Popup

What is the best way to validate an input control within a Bootstrap jQuery modal dialog? Check out some examples of modal dialogs in this link http://getbootstrap.com/javascript/#modals The Bootstrap Modal examples typically contain this type of Input: ...

JavaScript function failing to validate password

While engaging in an online game where the objective is to uncover a password by inspecting the page source or element, I encountered a puzzling line: if(el.value == ""+CodeCode+""). My assumption is that el.value represents my guess, and it indicates that ...

Invoke a JavaScript function with arguments upon clicking on a hyperlink

Struggling to generate code for an href tag with a JavaScript function that takes parameters - a string and an object converted into a json string. My initial attempt looked like this: return '<a style="text-decoration:underline;cursor:pointer" ta ...

The WebView component is unable to display internally stored CSS files within the project

Looking to display HTML content with CSS styling stored in a file downloaded from a URL and saved within the "context.filesDir". The downloaded folder contains all the assets required by the CSS file. Despite passing the CSS file path to the webv ...

Generating dynamic colors from a map in SASS within a media query function

Utilizing @include-media for SASS breakpoints (). Seeking to create a dynamic breakpoint helper text that changes background color on various media sizes. Important Breakpoint mixin - https://raw.githubusercontent.com/eduardoboucas/include-media/master/d ...

Flexbox and CSS3 width/height declarations causing problems with vertical alignment

Struggling to vertically center a nav element and align it to the right of the screen? There seems to be something causing it to shift slightly off-center. In this setup, the red represents the flex container, the green is the header, and the grey box is ...

What is the best way to ensure that the navigation is properly displayed with Bootstrap 4?

While updating a website and incorporating Bootstrap 4 beta, I encountered an issue with the navigation display. Despite making some adjustments, it remains in a vertical format - images are attached for reference. https://i.sstatic.net/BKhWb.png Below i ...

The functionality of min-height in CSS seems to be malfunctioning

One of my HTML elements has a parent with the ID #out, and a child with the ID #in. The parent is positioned absolutely, with a minimum height of 100%. It seems to be functioning correctly in most browsers, except when I also set the child's min-heigh ...