Arranging elements in a single line using Bootstrap 4

Question

Arranging elements in a single line using Bootstrap 4

I need to align links in a row at the bottom, such as "Link 1 left bottom", "Link 2 center bottom", "Link 3 right bottom" but "Link 2" is not centered on PC and mobile devices.

HTML:

            <div>
                <a id="contact" href="/contact">Link 1</a>
                <a id="link" href="/repo">Link 2</a>
                <a id="api" href="/json">Link 3</a>
            </div>

CSS:

#contact{
    float: left;
    font-size: 20px;
    padding-top: 0.17em;
}

#api{
    float: right;
    font-size: 20px;
    padding-top: 0.17em;
}

#link{
    display: inline;
    font-size: 30px;
    padding-right: 2.5%;
}

Current Appearance:

https://i.sstatic.net/p86Fm.jpg

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

To effortlessly achieve that, you can utilize Bootstrap's predefined classes d-flex and justify-content-between.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="d-flex justify-content-between">
  <a id="contact" href="/contact">Link 1</a>
  <a id="link" href="/repo">Link 2</a>
  <a id="api" href="/json">Link 3</a>
</div>

Answer 2

To effortlessly achieve that, you can utilize Bootstrap's predefined classes d-flex and justify-content-between.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="d-flex justify-content-between">
  <a id="contact" href="/contact">Link 1</a>
  <a id="link" href="/repo">Link 2</a>
  <a id="api" href="/json">Link 3</a>
</div>

Answer 3

Answer №2

Instead of using css code, replace it with the d-flex class and justify-content-* utilities for the container.

Utilize the justify-content utilities on flexbox containers to adjust the alignment of flex items on the main axis (x-axis by default, y-axis if flex-direction is set to column). Options include start, end, center, between, or around. - Bootstrap

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex justify-content-between">
  <a id="contact" href="/contact">Link 1</a>
  <a id="link" href="/repo">Link 2</a>
  <a id="api" href="/json">Link 3</a>
</div>

Answer 4

Instead of using css code, replace it with the d-flex class and justify-content-* utilities for the container.

Utilize the justify-content utilities on flexbox containers to adjust the alignment of flex items on the main axis (x-axis by default, y-axis if flex-direction is set to column). Options include start, end, center, between, or around. - Bootstrap

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex justify-content-between">
  <a id="contact" href="/contact">Link 1</a>
  <a id="link" href="/repo">Link 2</a>
  <a id="api" href="/json">Link 3</a>
</div>

Answer 5

Answer №3

Utilize the d-flex class from http://getbootstrap.com/docs/4.1/utilities/flex/

flex-md-row : for presenting content in a row for medium and large devices

https://i.sstatic.net/5HkNs.png 2. flex-column : for displaying content in a column on mobile devices

https://i.sstatic.net/qeIXf.png

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex flex-md-row flex-column justify-content-between text-center">
  <a id="contact" href="/contact">Link 1</a>
  <a id="link" href="/repo">Link 2</a>
  <a id="api" href="/json">Link 3</a>
</div>

Answer 6

Utilize the d-flex class from http://getbootstrap.com/docs/4.1/utilities/flex/

flex-md-row : for presenting content in a row for medium and large devices

https://i.sstatic.net/5HkNs.png 2. flex-column : for displaying content in a column on mobile devices

https://i.sstatic.net/qeIXf.png

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex flex-md-row flex-column justify-content-between text-center">
  <a id="contact" href="/contact">Link 1</a>
  <a id="link" href="/repo">Link 2</a>
  <a id="api" href="/json">Link 3</a>
</div>

Answer 7

Answer №4

One way to achieve this using Bootstrap 4 is as follows:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" >

<ul class="nav d-flex justify-content-between">
  <li class="nav-item">
    <a class="nav-link active" href="#">Link 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 3</a>
  </li>
</ul>

For more information, visit: https://getbootstrap.com/docs/4.1/components/navs/

Answer 8

One way to achieve this using Bootstrap 4 is as follows:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" >

<ul class="nav d-flex justify-content-between">
  <li class="nav-item">
    <a class="nav-link active" href="#">Link 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 3</a>
  </li>
</ul>

For more information, visit: https://getbootstrap.com/docs/4.1/components/navs/

Answer 9

Answer №5

Here is the code snippet you can use:

This code creates a div at the bottom of the page:(as specified: left bottom...)

position: fixed;
bottom: 0;
width: 100%;

div{
text-align: center; 
    position: fixed;
    bottom: 0;
    width: 100%;
}
#contact{
   float: left;
    font-size: 20px;
    padding-top: 0.17em;
}

#api{
    float: right;
    font-size: 20px;
    padding-top: 0.17em;
}

#link{
    font-size: 30px;
    padding-right: 2.5%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div>
<a id="contact" href="/contact">Link 1</a>
<a id="link" href="/repo">Link 2</a>
<a id="api" href="/json">Link 3</a>
 </div>

Answer 10

Here is the code snippet you can use:

This code creates a div at the bottom of the page:(as specified: left bottom...)

position: fixed;
bottom: 0;
width: 100%;

div{
text-align: center; 
    position: fixed;
    bottom: 0;
    width: 100%;
}
#contact{
   float: left;
    font-size: 20px;
    padding-top: 0.17em;
}

#api{
    float: right;
    font-size: 20px;
    padding-top: 0.17em;
}

#link{
    font-size: 30px;
    padding-right: 2.5%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div>
<a id="contact" href="/contact">Link 1</a>
<a id="link" href="/repo">Link 2</a>
<a id="api" href="/json">Link 3</a>
 </div>

Answer 11

Answer №6

If you want to achieve this effect, follow these steps:

div {
    text-align: center;
}
#contact{
    float: left;
    font-size: 20px;
    padding-top: 0.17em;
}

#api{
    float: right;
    font-size: 20px;
    padding-top: 0.17em;
}

#link {
    padding-top: 0.17em;
    font-size: 30px;
}

<div>
    <a id="contact" href="/contact">Link 1</a>
    <a id="link" href="/repo">Link 2</a>
    <a id="api" href="/json">Link 3</a>
</div>

Answer 12

If you want to achieve this effect, follow these steps:

div {
    text-align: center;
}
#contact{
    float: left;
    font-size: 20px;
    padding-top: 0.17em;
}

#api{
    float: right;
    font-size: 20px;
    padding-top: 0.17em;
}

#link {
    padding-top: 0.17em;
    font-size: 30px;
}

<div>
    <a id="contact" href="/contact">Link 1</a>
    <a id="link" href="/repo">Link 2</a>
    <a id="api" href="/json">Link 3</a>
</div>

Arranging elements in a single line using Bootstrap 4

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Adding data from PHP into a designated div element

When the window is resized, the nested div parent and child are overlapping

Resizing Image-maps and images on the fly with maphilight.min.js

Enhance VideoJS using custom Ionic icons in a NextJS environment

Incorporate a Background Image, which is linked to a website URL, by utilizing an external CSS file within

Interactive Video Effect

Challenges with resizing floating divs

How can I use CSS to change the background color of a fixed navbar when scrolling?

Error: The token < was not expected in ng2 bootstrap code

I'm having trouble with my tablet view taking priority over my desktop view - what could be causing this issue?

Enhancing code with new Javascript functionality

Implementing jQuery to enable the selection of multiple options depending on user input

Omit child DIV element in JavaScript and the Document Object Model

In order to maintain a custom tooltip in an open state until it is hovered over, while also controlling its

When you choose the File->Print option, the PDF contents are seamlessly printed within the document

Exploring HTML Data with Python String Manipulation

HTML/PHP/JS - Submit Form and Upload File Simultaneously

Experience the sleek transparency when black hues grace the interface on iOS 14 and above

Updating ListItemText styles in MUI when active with react-router

What could be the reason for the HTML canvas not displaying anything after a new element is added?