Twitter Bootstrap Question posted in

Left and right text under image on same line?-Twitter bootstrap

I want to place 2 links on the left and 1 on the right side under some images.
The images are all different sizes and everything in my main div is 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 Ansicht</a> |
          <a href="#">4K Ansicht</a>
        </p>

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

</main>

At the moment i did set the paragraph under the image to the width of the image:
And it looks like this with text only on the left side:
enter image description here

What i need is:
enter image description here

I guess a figure around the image and the text inside it is part of the solution.
Whats the best way doing it in the latest bootstrap?

Tags:

2

Answers


  1. 0

    Try playing with this snippet:

    <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>
    Login or Signup to reply.
  2. 0

    You can use float-left and float-right bootstrap classes to get texts to the left and right.

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search