Aligning Bootstrap 4 Images and Spans

My goal involves two tasks: 1 - CENTER a Span within an Img; 2 - ALIGN the Span to the right of the main div

This is what I currently have -> https://i.sstatic.net/Yln15.png

The existing code is as follows:

<div class="row" style="text-align: right;">
  <img src="thumbnails/americares.png" class="pl-2 pb-2">
  <span class="price" style="display:inline-block;padding-bottom:5px;">$20</span>
</div>

The price class is defined like this:

<style>
.price{
    padding-bottom: 15px;
    color: #29303b;
    font-size: 18px;
    font-weight: 600;
    margin-right: 10px;
}
</style>

I am looking to shift the price to this location -> https://i.sstatic.net/vOK2h.png

cssbootstrap-4

Answer №1

To improve layout, apply the display flex property to the main container.

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

With this change, you may no longer require padding-bottom: 15px;.

Answer №2

To create a layout with items aligned in a flex row, you can utilize the flex row feature. This can easily be achieved if you are working with bootstrap 4.

<div class="row d-flex flex-row justify-content-between align-items-center">
  <img src="thumbnails/brandlogo.png">
  <span class="price">$30</span>
</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

Leveraging $last in Angular for obtaining the final visible element with ng-show

My ng-repeat container div contains multiple images, each with a corresponding div next to it. Using $last, I can make sure only the div of the final image is visible after all images. However, I also have a filter button on the page that hides certain im ...

javascriptjqueryhtmlcssangularjs

Dynamic Hero Banner

As I work on creating a basic website for my football team, I am facing an issue with the text placement in different screen sizes. While the Jumbotron background image resizes perfectly according to the screen size, the text outside of the Jumbotron doesn ...

htmlcssbootstrap-4media-queries

Incorporating Font Awesome icons within a Bootstrap 4 Card design

Hello, I am new to Bootstrap 4 and currently facing an issue that I hope is quite simple. Even after searching through resources and examples provided by Bootstrap, I was unable to find a solution. My objective is to insert a Font Awesome icon inside a ca ...

bootstrap-4font-awesome

Material-UI Grid in Full Width Mode is malfunctioning

I've been delving into the Material-UI@next grid layout system to grasp its intricacies. What I'm aiming for is to have two papers that stretch across the entire width of the screen and collapse into one paper when the screen size shrinks. The d ...

cssreactjsmaterial-designmaterial-ui

The background banner is failing to display within the divbox

Having some trouble with my top banner in the HTML and CSS code I'm using to create a master page for ASP.NET. Oddly, the banner does show up on the design tab in Visual Studio, but it's not displaying properly. Here's the relevant code, can ...

asp.netcssimagehtml

Unable to adjust the margin-bottom attribute in CSS

Currently, I'm in the process of developing a website and attempting to build the client-side without using any frameworks. However, for some reason, I am facing difficulty in changing the margin-bottom property. My goal is to create space between the ...

htmlcsswebfrontend

Troubleshooting a Navigation Styling Issue in HTML and CSS

I'm struggling to position my drop-down menus correctly in my WordPress theme navigation. They are appearing far away from the nav bar and end up near the top left corner of the screen when I hover over a ul li >. Here is the CSS code I am using: ...

htmlcsswordpressthemes

Steps to adding a collection of links (stylesheets, javascript files) to each html document

Is it feasible to add a list of links to multiple HTML files? I was inspired by W3 School's W3 Include functionality, which allows you to import blocks of HTML code into various files simultaneously, making it convenient for making changes across many ...

javascripthtmlcss

Creating a versatile button that adjusts seamlessly across different screen sizes, from smartphones to larger

I need assistance with a straightforward task - creating a button that remains centered at all times. What would be the most effective method to achieve this, and is it possible to do so easily? Currently, I have managed to create a blue button; however, ...

htmlcssbuttonresponsive

Methods for animating .jpg images using CSS

I'm currently working on animating an image, specifically moving it from left to right and back. However, before I dive into implementing CSS animation keyframes, I noticed that I am having trouble getting the HTML element to follow the CSS styles I a ...

cssanimation

What could be the reason for not just removing the pseudo-class, but instead deleting the entire CSS document altogether?

var style = document.styleSheets[1] style.deleteRule(`.block__header::after`) console.log(`.block__header::after`) What is preventing it from being removed from the CSS document? The pseudo-class is still found in the console, and when trying to dele ...

javascripthtmlcss

Surround the image with horizontal links on each side

I am attempting to design a horizontal unordered list with an image positioned in the center of it. I am facing the challenge of not being able to insert the image directly within the unordered list. Is there a way to align the image in the center while ha ...

css-floatcss

Is there a way to divide v-progress linear into 4 pieces in Vuejs, or are there alternative design options for achieving this in Vuetify 2?

I have set up a table in Vuetify 2 with a v-progress-linear component to monitor the user's remaining time. Initially, my implementation was simple like this. https://i.sstatic.net/x373G.png However, we decided to split it into 4 sections for better ...

csstypescriptvue.jsvuetify.jsprogress-bar

Incorporating both Tailwind CSS and Bootstrap in a Laravel project for a dynamic and stylish

Hey there! I've got a quick question for you. I'm currently working on my final year project and I was wondering if it would be okay to use both bootsrap and tailwind css together. I've used them separately before, but now I want to mix thin ...

laravelbootstrap-4tailwind-css

Creating a seamless and interactive online platform

I am in the process of designing a website that has a sleek and dynamic layout, rather than just a static homepage. Let me explain further: Here is my current setup so you can understand what I am trying to achieve. By dynamic, I mean that when the page ...

javascriptcsshtmlweb

What is the best way to create a blurred effect on an image during loading, and then transition to a sharp image once it is fully loaded?

I'm currently working on a project where I want the images to display as a blurred preview initially, and then become clear once fully loaded. This is similar to the feature seen on Instagram, where the app shows a blurred image before displaying the ...

javascripthtmljquerycss

Is there a way to activate the dashed line around buttons when pressing the tab key?

Can someone help me figure out how to display the "dashed line" that shows up when you tab through buttons? I'm not sure which CSS code is responsible for hiding it. Is it something like a:hover or a:active? (I'm assuming this is related to CSS.) ...

htmlcss

Creating visually appealing transition effects like sliding in an autocomplete feature can enhance the user experience and

I have successfully implemented autocomplete functionality, but now I am looking to add a transition effect (slide down) to the suggested menu. After researching online, I found a helpful tutorial on this topic: Based on the information I gathered, I tri ...

javascriptjqueryhtmlcssautocomplete

Enhancing the functionality of angular-messages is impacting the overall design of

Displaying here is the current state of my login form: https://i.sstatic.net/EMcjF.png However, subsequent to upgrading angular-message to version 1.4 and higher, the layout transforms into this: https://i.sstatic.net/vVBHf.png Sharing my source code f ...

cssangularjsionic-frameworkupgradeng-messages

Utilize CSS to incorporate an image as the background of a <div> element

I'm a beginner in the world of HTML/CSS and this is my practice page. I have a section with an image of a person, and I'd like to add a quote next to the image. However, I'm struggling to make the image fill the entire width and height of th ...

htmlcssimage