CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Not Sure
Not Sure

Reputation: 37

Automatically adjust text size in bootstrap 4

The numbers are going to the next line, how to adjust them to come in the same line without changing others size?

Run the below script in full screen:

.card-body {
  display: flex;
}

.card-title {
  margin-left: auto;
  font-family: 'Yatra One', cursive;
}

@media(min-width:768px) {
  .card-title {
    font-size: 3vw;
    word-break: break-all;
  }
}

@media(max-width:767px) {
  .card-title {
    font-size: 10vw;
    word-break: break-all;
  }
}

.col-10 {
  height: 65px;
}

.col-2 {
  height: 65px;
}

.img-fluid {
  height: 100%!important;
}
<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 href="https://fonts.googleapis.com/css?family=Yatra+One&display=swap" rel="stylesheet">



<div class="row">

  <div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
    <div class="row">
      <div class="card-body col-12 border p-0">
        <img src="https://i.imgur.com/ZyROdEa.png" width="100">
        <h5 class="card-title float-right">9700005243</h5>
      </div>
      <div class="card-body col-12 border p-0">
        <a href="#number_256" class="btn btn-block" style="background-color: #00BFFF; color: white;" data-toggle="modal" data-target="#number_256">Get Details</a>
      </div>
    </div>
  </div>

  <div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
    <div class="row">
      <div class="card-body col-12 border p-0">
        <img src="https://i.imgur.com/ZyROdEa.png" width="100">
        <h5 class="card-title float-right">9700005243</h5>
      </div>
      <div class="card-body col-12 border p-0">
        <a href="#number_256" class="btn btn-block" style="background-color: #00BFFF; color: white;" data-toggle="modal" data-target="#number_256">Get Details</a>
      </div>
    </div>
  </div>

  <div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
    <div class="row">
      <div class="card-body col-12 border p-0">
        <img src="https://i.imgur.com/ZyROdEa.png" width="100">
        <h5 class="card-title float-right">9700005218</h5>
      </div>
      <div class="card-body col-12 border p-0">
        <a href="#number_256" class="btn btn-block" style="background-color: #00BFFF; color: white;" data-toggle="modal" data-target="#number_256">Get Details</a>
      </div>
    </div>
  </div>

  <div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
    <div class="row">
      <div class="card-body col-12 border p-0">
        <img src="https://i.imgur.com/ZyROdEa.png" width="100">
        <h5 class="card-title float-right">9700005218</h5>
      </div>
      <div class="card-body col-12 border p-0">
        <a href="#number_256" class="btn btn-block" style="background-color: #00BFFF; color: white;" data-toggle="modal" data-target="#number_256">Get Details</a>
      </div>
    </div>
  </div>

  <div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
    <div class="row">
      <div class="card-body col-12 border p-0">
        <img src="https://i.imgur.com/ZyROdEa.png" width="100">
        <h5 class="card-title float-right">9700005218</h5>
      </div>
      <div class="card-body col-12 border p-0">
        <a href="#number_256" class="btn btn-block" style="background-color: #00BFFF; color: white;" data-toggle="modal" data-target="#number_256">Get Details</a>
      </div>
    </div>
  </div>

  <div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
    <div class="row">
      <div class="card-body col-12 border p-0">
        <img src="https://i.imgur.com/ZyROdEa.png" width="100">
        <h5 class="card-title float-right">1111111111</h5>
      </div>
      <div class="card-body col-12 border p-0">
        <a href="#number_256" class="btn btn-block" style="background-color: #00BFFF; color: white;" data-toggle="modal" data-target="#number_256">Get Details</a>
      </div>
    </div>
  </div>

</div>

The numbers are going to the next line, how to adjust them to come in the same line without changing others size?

Also how to display numbers in the middle? (same space in top and bottom)

Upvotes: 1

Views: 7615

Answers (2)

Kondal
Kondal

Reputation: 2970

By default Boostrap wrote word-break: break-all; Changed to word-break: keep-all;

Read this word-break w3 school 

@media (min-width: 768px)
.card-title {
  font-size: 3vw;
  word-break: keep-all !important;
}

Upvotes: 2

Kuba Michalski
Kuba Michalski

Reputation: 70

You can add margin: auto to center them and white-space: nowrap to prevent them from wrapping to the next line. Also, I'd suggest making font a bit smaller when resizing screen and/or making blocks bigger.

In case you want them to be absolutely centered and you don't care about overlapping the image, give them:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Upvotes: 0

Related Questions