Can the text be aligned both to the left and right on the same line beneath the

I am looking to arrange 2 links on the left and 1 on the right side below some images of various sizes. Everything in my main div is currently centered.

main .about p {
  margin-left: 50%;
  transform: translateX(-50%);
  width: 700px;
  line-height: 1.5;
  font-weight: 400;
  z-index: 9;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<main class="section mb-5">
  <!-- Main -->

  <section class="container mb-4">
    <div class="row">
      <div class="col-md-12 ml-md-auto text-center about">
        <header>
          <h1 class="mb-3">Some Title</h1>
        </header>

        <img src="image.jpg" height="484" width="700">
        <p class="text-left">
          <a href="#">FHD View</a> |
          <a href="#">4K View</a>
        </p>

      </div>
    </div>
  </section>

</main>

Currently, I have set the paragraph under the image to the width of the image, resulting in text only on the left side: https://i.sstatic.net/uS0cd.jpg

What I require is: https://i.sstatic.net/PHsoi.jpg

I believe enclosing the image in a figure element with the text inside it could be part of the solution. What would be the best approach using the latest version of Bootstrap?

htmlcssbootstrap-4

Answer №1

Give this code snippet a try:

<main class="container-fluid">
    <div class="row">
        <img class="col-md-12" src="#" alt="test" style="background-color: blue; height: 400px;">            
    </div>
    <div class="row subtitle-container">
        <div class="col-md-10 left-subtitle">
            Some Text | Some Text
        </div>
        <div class="col-md-2 right-subtitle">
            Some Text
        </div>
    </div>
</main>

Answer №2

To align text to the left and right, you can utilize the float-left and float-right bootstrap classes.

main .about p {
  margin-left: 50%;
  transform: translateX(-50%);
  width: 700px;
  line-height: 1.5;
  font-weight: 400;
  z-index: 9;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<main class="section mb-5">
  <!-- Main -->

  <section class="container mb-4">
    <div class="row">
      <div class="col-md-12 ml-md-auto text-center about">
        <header>
          <h1 class="mb-3">Some Title</h1>
        </header>

        <img src="image.jpg" class="w-100" height="484" width="700">
        <div class="text-center clearfix">
          <a href="#" class="float-left">FHD Ansicht</a>
          <span class="float-left mx-2">|</span>
          <a href="#" class="float-left">4K Ansicht</a>
          <!-- <span>|</span> -->
          <a href="#" class="float-right text-danger">another link</a>
        </div>

      </div>
    </div>
  </section>

</main>

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

Mechanize lacks the ability to handle cookies in the same way a web browser would

Here is the code snippet I'm working with: use WWW::Mechanize; $url = "http://daccess-ods.un.org/access.nsf/Get?Open&DS=A/HRC/WGAD/2015/28&Lang=E"; $mech = WWW::Mechanize->new(); $mech->get($url); $content = $mech->content(); while ( ...

htmlperlcookiesmechanize

Resounding achievement following the completion of the upload

I'm looking to display the message "success" on the same page as my form if it uploads correctly. I am new to PHP and not sure how to achieve this. Can anyone help? index.php <form action="upload" method="POST"> <input name="field1 ...

phphtml

Update the central information while keeping the entire webpage intact

Hey there, I could really use some assistance! I'm working on a software documentation website that is similar to the mongodb documentation page. It has a header, sidebar (navbar menu), and main content area. Within the sidebar navbar menu, I have dr ...

javascripthtmlnode.js

What is the best way to show TypeScript code using "<code>" tags within an Angular application?

I am looking to showcase some TypeScript (angular code) as plain text on my website using prismjs. However, the Angular framework is executing the code instead. How can I prevent it from running? I have attempted enclosing it within pre and code tags wit ...

htmlangulartypescript

Tips for positioning a mat-form-field beside an h1 tag

I've been attempting to place an h1 next to a mat-form-field from Angular Material, but I'm encountering some difficulties. Here's what I've attempted so far: <div class="mat-elevation-z8"> <mat-form-field> <mat-l ...

htmlcssangularangular-material

Puzzled by the CSS Box Model - There's a piece of the puzzle I

Check out my simplified fluid layout right here at this link. I've been trying to figure out why the alignment between the right column and the header above it seems off, even though there's no padding involved. Both have the same border styles, ...

csslayout

What is the best way to convert a repetitive string into a reusable function?

I am currently retrieving data from an API and I want to display it on my website in a more user-friendly manner. The challenge I'm facing is that the number of variables I need is constantly changing, along with their corresponding values. So, I&apos ...

javascripthtmljsonapi

Creating a universal header for all webpages in Angular JS by dynamically adding elements using JavaScript DOM manipulation techniques

I have successfully created a json File containing an array of "learnobjects", each including an id, name, and link. Check out my plnkr example var myMessage = { "learnobjects": [{ "id": "1", "name": "Animation-Basics", "link": "animation_bas ...

javascripthtmlangularjsjsondom

What is the process for embedding images and text within a nested division element?

I have a website layout with 4 main sections: header, left side, right side, and footer. I would like to further divide the header into two sections - left header and right header. The right header should contain an image along with other options like home ...

htmlcss

Is the text in bold format or not detectable in contenteditable mode?

I am currently working on developing a custom text editor using the built-in contenteditable feature in HTML. I am trying to figure out how to determine whether the selected text is bold or not within the editor. This is what my current setup looks like: ...

javascriptjqueryhtml

Ways to achieve 8 columns in a single row using Javascript and Bootstrap

Recently, I created a simple function for searching movies and manipulating them in the DOM. The issue arises when a movie name is entered and the API response returns around 20-30 recommendations. I wanted to display this fetched data in 8 columns per row ...

javascripthtmltwitter-bootstrapdombootstrap-4

All submissions consistently redirect to the same page without any action taking place

I am currently in the process of creating a form that will allow me to change/update my ticket status using a select option. However, whenever I submit the form, it redirects back to the same page instead of going to the desired "status-update.php" address ...

javascriptphpjqueryhtmlforms

Tips for customizing the appearance of a redux-tooltip

After implementing the redux-tooltip from this GitHub repository, I wanted to customize its styling to better align with my application's design. However, I realized that the Tooltip-Component's divs do not have any identifiers or class names, ma ...

javascriptcssreactjsreduxreact-redux

Display only alphabetic characters in the text field

I have a jQuery function that I am working on: $('#contact_name').on('input', function() { var input=$(this); var re =/^[A-Za-z]+$/; var is_email=re.test(input.val()); if(is_email) { } else { } }); This function is targeted at the fol ...

javascriptjqueryhtml

Unable to insert image into div element

Having trouble aligning profile images next to names instead of below the text within the div. Can't seem to figure out how to fix this issue. Just to clarify, I want the images to appear alongside the text on the page (the white image next to ' ...

htmlcssimage

Detecting click events in D3 for multiple SVG elements within a single webpage

My webpage includes two SVG images inserted using D3.js. I am able to add click events to the SVGs that are directly appended to the body. However, I have encountered an issue with another "floating" div positioned above the first SVG, where I append a dif ...

javascriptjquerycssd3.jssvg

Creating an Array from jSoup Elements in Java: What's the Best Approach?

Is there a way to extract values from HTML attributes (values="valueIWant") and store them in an array? I have attempted the following method without success: HttpEntity entity5 = response5.getEntity(); String defaultString = EntityUtils.toString(enti ...

javahtmlarraysjsoup

Issue with the background opacity not being properly applied at the bottom of the div

One challenge I am facing is creating a clickable image with text at the bottom and a semi-transparent background behind it, which is a common design element on many websites. I have everything working except for a small portion of the image showing below ...

htmlcssopacity

Is it more effective to be precise when choosing IDs in CSS?

If you have a unique identifier on a div element called main, how should you reference it in CSS - with div#main or just #main? What is considered best practice? Considering that only one element can have a specific id, using div#main essentially duplicat ...

htmlcsscss-selectors

Choosing bookmarkable views in Angular 5 without using routes

I'm currently working on a unique Angular 5 application that deviates from the standard use of routes. Instead, we have our own custom menu structure for selecting views. However, we still want to be able to provide bookmarkable URLs that open specifi ...

javascripthtmlangular