CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
ChunkCoder
ChunkCoder

Reputation: 307

Bootstrap 4 set elements in one line

I want to set links in one line on bottom, like "Link 1 left bottom", "Link 2 center bottom", "Link 3 right bottom" but "Link 2" 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%;
}

How it looks now

enter image description here

Upvotes: 7

Views: 25868

Answers (6)

mahan
mahan

Reputation: 14935

Remove all of the css code and use d-flex and justify-content-* for the container.

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), 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>

Upvotes: 2

Gregor Ojstersek
Gregor Ojstersek

Reputation: 1379

You can do it like this:

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>

Upvotes: 0

RAJNIK PATEL
RAJNIK PATEL

Reputation: 1049

Using Bootstrap 4 you can do by this way.

<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 : https://getbootstrap.com/docs/4.1/components/navs/

Upvotes: 1

Saurabh Mistry
Saurabh Mistry

Reputation: 13669

Use d-flex http://getbootstrap.com/docs/4.1/utilities/flex/

  1. flex-md-row : for displaying inline for medium and large devices

enter image description here 2. flex-column : for displaying in column in mobile devices

enter image description here

<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>

Upvotes: 1

לבני מלכה
לבני מלכה

Reputation: 16251

Use this code:

This make div in bottom:(like you said: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>

Upvotes: 0

baao
baao

Reputation: 73231

You can use bootstraps build in classes d-flex and justify-content-between to achieve that easily.

<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>

Upvotes: 11

Related Questions