CODEWITHSUNDEEP
htmlcss
Engin Yücelen
Engin Yücelen

Reputation: 29

Keep list buttons at same align

I'm trying to keep list buttons at same align but i dont know how to do it if text is long button's position changes automatically

 <html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="revisit-after" content="1 days">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/css/mdb.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://asd.online/css/index.css">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <title>YeniPDF</title>
      </head>
      <body>
      <div class="container">
         <ul class="list-unstyled row" style="text-align:center;">

        <li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100&quot;" height="120"><div class="hizala"><a href="#">EXAMPLE EXAMPLE EXAMPLE</a></div>
        <button type="submit" class="btn btn-success">
         <i class="fa fa-arrow-circle-right fa-lg"></i>
        </button></form></li>
        <li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="

a

" width="100&quot;" height="120"><div class="hizala"><a href="#">EXAMPLE EXAMPLE EXAMPLE EXAMPLE</a></div>
        <button type="submit" class="btn btn-success">
         <i class="fa fa-arrow-circle-right fa-lg"></i>
        </button></form></li>
        <li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100&quot;" height="120"><div class="hizala"><a href="#">EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE</a></div>
        <button type="submit" class="btn btn-success">
         <i class="fa fa-arrow-circle-right fa-lg"></i>
        </button></form></li>
        <li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100&quot;" height="120"><div class="hizala"><a href="#">EXAMPLE EXAMPLE EXAMPLE</a></div>
        <button type="submit" class="btn btn-success">
         <i class="fa fa-arrow-circle-right fa-lg"></i>
        </button></form></li>
      </ul>
      </div>
      </body>
    </html>

i'm not using any specific css just bootstrap 4 this is js fiddle https://jsfiddle.net/ygoqmb14/2/

Upvotes: 1

Views: 54

Answers (1)

Par Tha
Par Tha

Reputation: 1531

Try add min-height for .hizala class

.hizala {
  min-height: 130px;
}

Upvotes: 1

Related Questions