CODEWITHSUNDEEP
htmlcssbootstrap-4vertical-alignment
Sam
Sam

Reputation: 167

Bootstrap buttons and text relative and vertical alignment

I am trying to make something similar to the below image via bootstrap 4.

enter image description here

You can assume that the black rectangle is the window, the green is a div with the three elements inside, it should be vertically in the center, the red is text and the oranges are two buttons.

This is my code but it doesn't work:

The three elements should stack in rows if the window width is too small.

<div class="row justify-content-md-center">
  <div class="col-sm-12">
    <span class="btn-projects scrollto">blablablablablablasalkadfjklasd</span>
    <span class="row justify-content-md-center">
      <span class="col-s-2">
        <a href="/" class="btn-get-started scrollto"><i class="fa fa-google"
            style="color:tomato;margin-left:4px;"></i></a>
      </span>
      <span class="col-s-2">
        <a href="/" class="btn-get-started scrollto"><i class="fa fa-linkedin"
            style="color:tomato;margin-left:4px;"></i></a>
      </span>
    </span>
  </div>
</div>

Thanks for help.

Upvotes: 0

Views: 309

Answers (3)

Raeesh Alam
Raeesh Alam

Reputation: 3480

You can manage width inside row according to these predefined classes col-sm-12 col-md-7 col-lg-6 col-xl-5. So there is no need inline CSS.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
  <div class="row justify-content-center border border-dark p-5">
    <div class="col-sm-12 col-md-7 col-lg-6 col-xl-5">
      <div class="row justify-content-center align-items-center border border-success text-center">
        <span class="col-2">
          <a href="/" class="text-warning">
            <i class="fa fa-md fa-star"></i>
          </a>
        </span>
        <span class="col-8 border border-danger">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </span>
        <span class="col-2">
          <a href="/" class="text-warning">
            <i class="fa fa-md fa-star"></i>
          </a>
        </span>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

anastaciu
anastaciu

Reputation: 23792

A good way to use bootstrap is to use the col and row bootstrap classes to map the content to the page, in your case a nice way to do it would be to create a row and inside of it create 3 columns using col class, to align I'd just use plain old styling to vertical and horizontal align the contents:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="row" style="border: 2px solid black;height:150px;padding:0;margin:0">
  <div class="col-sm-12" style="display:flex;justify-content:center;align-items:center">
    <div class="row"
      style="border: 1px solid green;display:flex;justify-content:center;align-items:center;text-align:center">
      <span class="col-sm-2">
        <a href="/" class="btn-get-started scrollto"> <i class="fa fa-md fa-google" style="color:tomato;"></i></a>
      </span>
      <span class="col-sm-8" style="border: 1px solid red">blablablablablabla</span>
      <span class="col-sm-2">
        <a href="/" class="btn-get-started scrollto"> <i class="fa fa-md fa-linkedin" style="color:tomato;"></i></a>
      </span>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

The code is basically the same as yours with the propper rearrangements and the center styling, the height of the sample is set to 150px for sample purposes, but you can set it to 100% or whatever height you wish in your project. The col relative proportions I used are also for demonstration purposes, you can, of course, use whatever dimensions you need.

I just added the propper external linkage so the snippet can be ran.

Note that the inline styling is also for sample purposes, you can/should place these in a style sheet.

Upvotes: 1

Karar Barcha
Karar Barcha

Reputation: 406

Add width to child two to set fixed width.

.black {
    border: 1px black solid;
    padding: 5% 10%;
    margin: 10%;
}
.main {
    border: 1px green solid;
    padding: 5px;
    display: flex;
}
.child{
    display: inline-block;
    width: 100%;
    padding: 15px 0px;
}
.child.one:hover,
.child.three:hover{
    cursor: pointer;
    background-color: #efefef;
}
.child.one{
    width: 50px;
    border: 1px #ff9800 solid;
    text-align: center;
}
.child.two{
    width: 100%;
    margin: 0px 5px;
    padding: 15px;
    border: 1px red solid;
}
.child.three{
    width: 50px;
    border: 1px #ff9800 solid;
    text-align: center;
}
<div class="black">
    <div class="main">
        <a class="child one">G</a>
        <div class="child two">Hurraaayyy!</div>
        <a class="child three">G</a>
    </div>
</div>

Upvotes: 1

Related Questions