Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

How To Fix Coloumn Size During Search Method In Html?

Post a Comment
I am implementing a search and on that search results come. BUT WHEN the organization name becomes big. The alignment completely changes. How can I able to fix the same.

Solution 1:

bootstrap 4 autommatically solves the issue for you, see the code below, it will solve the issue for you.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="row">
      <div class="col-sm-2 mt-2"><div class="bg-primary">qweqweqw eqweq weqweqwq</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">qweqweq</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">qweq weqweqwe</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">qweqwe </div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">qweq</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">qweqwe qwe</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">qweqwe</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">qwe asdasd</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">asda qweqwe</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">asd adasd asdasdasd aadasdasd asdasd </div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">asdasd asdasd</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">ad</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">asdasd</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">zxczxczxc</div></div>
    </div>
  </body>

</html>

Solution 2:

You can truncate post.bussinessName or you can try this in your css:

.proerty-item {
  min-height: 330px;
}

Post a Comment for "How To Fix Coloumn Size During Search Method In Html?"