Tips for implementing nested p tags within CSS and Bootstrap containers

Behold, here lies the image:

I'm uncertain about how to align the text "Location, Type, Price, $2,250" exactly like in the image. Also, as a newcomer to bootstrap, I would appreciate feedback on whether my approach is correct.

.image-box img {
  width: 100%;
}
.image-box h4 {
  text-align: center;
  background-color: #8C1211;
  color: #FFFFFF;
  padding: 10px 0;
  font-weight: bold;
  margin: 0;
}
.image-box .description {
  background-color: #D6D6D6;
  border-radius: 4px;
}
<div class="text-container">
  <div class="row">
    <div class="col-sm-3 image-box">
      <img src="images/realty.jpg">
      <h4>REAL ESTATE</h4>
      <div class="description">
        <p>Beautiful and spacious 4.5 rooms: 1 million rent</p>
        <p>Location<span>Suchy</span>
          <p>
            <p>Price<span>$2,250</span>
            </p>
      </div>
    </div>
    <!-- Repeat for additional columns -->
  </div>
</div>

htmlcsstwitter-bootstrap

Answer №1

If you want to adjust the alignment of the span element inside the parent p elements based on your markup, one straightforward method is to use the float property:

.boxes-images .details p span{
  float: right;
}

Alternatively, you can utilize Bootstrap's .pull-right class:

.pull-right {
  float: right !important;
}

Answer №2

To align your content to the right, simply add float:right to the span tag inside the p tag. You can also create space between the p and span by using a pseudo element or assigning a class to the span tag.

.boxes-images .details > p > span{
  float:right;
}

/*Using Pseudo element*/

.boxes-images .details > p > span:before{
 content:'';
 margin-left:50%;
 background:#111;
}

/* Adding pull-right class to the span tag will automatically float it to the right, 
since pull-right is a pre-defined bootstrap class.*/

<div class="details">
<p>Spacious 4.5 room apartment: CHF 1 million rent</p>
<p>Location<span class="pull-right">suchy</span></p>
<p>
   <p>Price<span class="pull-right">CHF 2'250</span></p>
</p>
</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

Create an excel spreadsheet using HTML tables with the help of jQuery

Upon clicking a button, I aim to generate an excel sheet. Essentially, I am trying to achieve what is being discussed here (Kalle H. Väravas answer). If the following links are not working within Mozilla browser, then maybe my code requires ActiveXObject ...

javascriptjqueryhtmlexcel

Adjust the video resolution by selecting various sources that direct to alternate quality options

Objective: I aim to create a streamlined control system that allows for easy adjustment of video quality with minimal code. Preferences: Although I have certain limitations, I prefer to avoid reinventing the wheel by creating a custom video control sche ...

javascriptjqueryhtmlhtml5-video

Bootstrap 4 or ngBootstrap: A Comparison

I have a couple of inquiries: Firstly, I am wondering if ngBootstrap is compatible with Angular 4. While I've seen instances on Google where individuals have successfully used Angular 4 with ngBootstrap, the official site mentions dependencies on Ang ...

angulartwitter-bootstrapbootstrap-4ng-bootstrap

Overlaying content in a strategic and effective manner is key to maximizing

<div id="container"> <div>HEADER</div> <div>CONTENT</div> <div>FOOTER</div> <div><textarea></textarea></div> </div> <button>activate overlay</button> #cont ...

javascriptjqueryhtmlcss

Angular select automatically saves the selected option when navigating between views

I would like the selected option in my dropdown menu to stay selected as I navigate through different views and then return back. Here is the view: <select ng-model="selectedSeason" class="form-control" ng-options="season as 'Season '+ seas ...

javascripthtmljsonangularjsangularjs-directive

The navigation menu links that are meant to stay fixed at the top of the page are not functioning

On my website, I implemented Foundation's Magellan sticky menu at the bottom. Strangely, when I view the site in Firefox, the menu functions properly. However, when I try to open it in Google Chrome, the links don't work (and the cursor pointer d ...

jqueryhtmlcssgoogle-chromezurb-foundation

If the iframe's CSS source is updated, the parent's CSS source will also change

I'm currently working on a unique school project that involves creating multiple CSS styles for different views. <link rel="stylesheet" type="text/css" href="css/main.css" title="main" media="screen"> <link rel="stylesheet" type="text/css" h ...

javascriptjqueryhtmlcssiframe

Add some animation to elements when the page loads

I am curious about triggering a css animation when the page loads. I am currently experimenting with css animations for the first time. Here is what I have created so far: https://jsfiddle.net/7prg793g. However, it only works upon hover at the moment. * ...

htmlcss

Issue with jQuery fadeTo() not working after appendTo() function completes

I am facing a problem with the code below that is meant to create a carousel effect for my website. The main issue I am encountering is that the original fadeTo() function does not actually fade the elements, but rather waits for the fade time to finish an ...

javascriptjqueryhtmlcss

The challenge of incorporating multiple stylesheets into an express/node/ejs application: encountering the error "Undefined style."

I am working on a project using express, node, and ejs and I want to be able to use different stylesheets for different views. In order to render a specific view with its corresponding style, I have included the following in my app.js file: app.get('/ ...

cssnode.jsexpressejs

Is there a way to trigger a click event within ng-repeat that will only update the specific item without invoking $apply?

After examining the sample code provided below, a couple of issues have come to light: Firstly, it seems that the "renderthis" function is being called twice per item when the page is initially loaded The main issue at hand arises when the button is ...

javascripthtmlangularjs

presentation not transitioning smoothly as the next slide appears

Initially, my aim is to center the slideshow on the page but I am uncertain about how to achieve it. This is how my current webpage appears: https://i.sstatic.net/E6bzQ.png Furthermore, as shown in the image, the sliding effect of the blue slide is movi ...

cssreactjs

The JavaScript file couldn't load because of a mismatch in MIME types

I keep encountering the following error : Loading failed for the <script> with source “http://localhost:3000/task-manager/public/js/signup.js”. The resource from “http://localhost:3000/task-manager/public/js/signup.js” was blocked due to MIME ...

htmlnode.jsexpresshandlebars.jsmime-types

Troubleshooting Problem with Text Labels on Bootstrap Progress Bars

I am attempting to utilize a Bootstrap progress bar to display text on it. The progress bar itself functions properly, but the text is not centered in the entire progress bar; rather, it is centered within the gray area. As the progress bar fills up, the t ...

javascripttwitter-bootstrapbootstrap-5

Connect to content on the current page

I am facing an issue where the linked heading of a section on the same page is getting lost under the fixed navigation bar when scrolling down. This problem seems to only occur on desktop view as it works fine on mobile preview. Here is the code I am curre ...

javascripthtmlcss

Something strange happening with the HTML received after making a jQuery AJAX request

My PHP form handler script echoes out some HTML, which is called by my AJAX call. Below is the jQuery code for this AJAX call: $(function() { $('#file').bind("change", function() { var formData = new FormData(); //loop to add ...

javascriptjqueryhtmlajax

Dropdown menu is not positioning correctly over other elements on the webpage

After researching multiple stack overflow questions and attempting various solutions, I still haven't been able to resolve my issue. Please refrain from marking this question as a duplicate. The problem I am facing is that my dropdown menu is not ap ...

htmlcsssass

The incompatibility of proxy objects and Object.create explained

Whenever I attempt the code below, I consistently receive a "RangeError: Maximum call stack size exceeded" error. However, if I simply access the receiver without including console.log(receiver);, everything works fine. This situation is very confusing. c ...

javascripthtml

Displaying information in an alert box with the use of JavaScript

Every time I attempt to display data in an alert box upon button click, I encounter an issue where the alert box fails to populate. Here is what I have tried: <head runat="server"> <title></title> <script type="text/javascript" s ...

javascriptjqueryhtml

The image shape at the bottom of the screen may disappear on certain resolutions

I've added a unique curvy shape at the bottom of the image on a bootstrap card I designed using bootstrap 5. Everything looks great on resolutions above 1400px, but on smaller screens, the shape disappears, leaving the image rectangular. I've tri ...

htmlcssbootstrap-5card