Twitter Bootstrap Question posted in

align vertically to a 3 items column with bootstrap 4-Twitter bootstrap

I’m trying to have several upvote/downvote counters on a row but I’m encountering several problems.
See here.
The arrows and vote should be smaller and get less space but I don’t know yet how to limit it. Instead they enlarge my row. The NAME near them is also not centered. How could I center it? I might change all to a table if that’s the only way.

This is the code:

.sss {
  float: left;
  clear: left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="container-fluid bg-primary pl-0 text-white">

  <div class="d-flex flex-row">
    <div class="p">
      <span vote-target="a.id" class="vote ">
          <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a> 
          <span class="sss" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
      </span>
      <span>NAME </span>
    </div>

    <div class="p">
      <span vote-target="a.id" class="vote ">
          <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a>
          <span class="sss" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
      </span>
      <span>NAME </span>
    </div>
  </div>
Tags:

2

Answers


  1. 0

    You can make the counter containers d-flex (flexbox) too, then use align-items-center…

    <div class="d-flex">
  <div class="p d-flex align-items-center">
    <span vote-target="a.id" class="vote ">
      <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a> 
      <span class="sss" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
    </span>
    <span>NAME </span>
  </div>

  <div class="p d-flex align-items-center">
    <span vote-target="a.id" class="vote ">
      <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a>
      <span class="sss" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
    </span>
    <span>NAME </span>
  </div>
</div>

    https://www.bootply.com/FvTTsvIDGX

    Login or Signup to reply.
  2. 0

    I removed your too much code but you like result 

    .p {
    display: flex;
}

.p span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="d-flex flex-row">
  
  <div class="p">
    <span vote-target="a.id" class="vote ">
      <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a> 
      <span class="sss" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
    </span>
    <span>NAME </span>
  </div>
  
  <div class="p">
    <span vote-target="a.id" class="vote ">
      <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a>
      <span class="sss" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
    </span>
    <span>NAME </span>
  </div>
</div>

    USING BOOTSTRAP CLASSES

    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="d-flex flex-row">
  
  <div class="p d-flex">
    <span vote-target="a.id" class="vote d-flex flex-column justify-content-center align-items-center">
      <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a> 
      <span class="sss d-flex flex-column justify-content-center align-items-center" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
    </span>
    <span class="d-flex flex-column justify-content-center align-items-center">NAME </span>
  </div>
  
  <div class="p d-flex">
    <span vote-target="a.id" class="vote d-flex flex-column justify-content-center align-items-center">
      <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a>
      <span class="sss d-flex flex-column justify-content-center align-items-center" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
    </span>
    <span class="d-flex flex-column justify-content-center align-items-center">NAME </span>
  </div>
</div>

    https://www.codeply.com/go/anuRTmVlBl

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search