CODEWITHSUNDEEP
htmlcssbootstrap-4
abu abu
abu abu

Reputation: 7022

Bootstrap column is not getting custom width

I am using Bootstrap for a Web Design. My HTML is like below

<div class="col utility_col">
  <div class="row">
    <div class="col vote_col">Vote</div>
    <div class="col sign_col"> 
      <img src="./img/sign_up.png">
      Sign Up
    </div>
    <div class="col">Login</div>
  </div> 
</div>

My CSS is like below

 .sign_col {
    display: flex;
    align-items: center;
    width: 127px;
}

If I increase the width of .sign_col then width of .vote_col also increases. How can I solve the issue ?

My output like below

enter image description here

Upvotes: 0

Views: 87

Answers (3)

jignasha
jignasha

Reputation: 176

Please Use flex property instead of width

.sign_col {
    display: flex;
    align-items: center;
   flex: 0 127px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col utility_col">
  <div class="row">
    <div class="col vote_col">Vote</div>
    <div class="col sign_col"> 
      <img src="./img/sign_up.png">
      Sign Up
    </div>
    <div class="col">Login</div>
  </div> 
</div>

Upvotes: 0

Robin
Robin

Reputation: 5427

You can set one's width according to other's using css variable. As an example i'm using scss as a css preprocessor.

<div class="one">
</div>

<div class="two">
</div>

...

$one-width: 200px;

.one {
  width: $one-width;
  height: 200px;
  background-color: red;
  margin-bottom: 10px;
}

.two {
  width: $one-width * .50;
  height: 200px;
  background-color: blue;
  margin-bottom: 10px;
}

Here i set class two's width according to one's width.

Update: inside row - there are 3 element: vote, sign, login. Give them col-lg-4, col-md-4, col-sm-4 class so that they will be positioned with same width. I think thats the best way to fix this problem.

Manipulating width manually isn't good, my personal opinion.

Upvotes: 1

nazifa rashid
nazifa rashid

Reputation: 1504

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <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">
</head>
<body>
<div class="container">
  <div class="row utility_col">
    <div class="col-3 vote_col d-flex justify-content-center">Vote</div>
    <div class="col-6 sign_col d-flex justify-content-center"> 
      <img src="./img/sign_up.png">
      Sign Up
    </div>
    <div class="col-3 d-flex justify-content-center">Login</div>
  </div>
</div>
</body>
</html>

You don't have to give width via CSS, just use grid system of bootstrap. .d-flex and .justify-content-center I have only used to make it centered aligned. if you don't need it you can remove!

https://getbootstrap.com/docs/4.3/layout/grid/

Upvotes: 0

Related Questions