Reputation: 170

bootstrap- image are not align to the top

I am using the grid system to make my images positioning more elegant. I want them to align at the top and each row should only have 4 items and then it goes to the next row. My currently alignment looks like below:

I want the image next to each other and position to top left. This is my code:

<!-- Product cards -->
<div class="row">        
  <div class="col col-md-2 ">
    <div class="dropdown">
      <button class="btn btn-default round-background" type="button" id="menu1" data-toggle="dropdown">
        <img src="{{asset('images/bedsheet.jpg')}}" style=" border-radius: 50%;  height: 150px;  width: 200px;">
      </button>
      <hr>
      <span class="text-capitalize"><strong>Bed Sheet</strong></span>
      <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
      </ul>
    </div>    

    <div class="dropdown">
      <button class="btn btn-default round-background" type="button" id="menu1" data-toggle="dropdown">
        <img src="{{asset('images/curtain.jpg')}}" style=" border-radius: 50%;  height: 150px; width: 200px;">
      </button>
      <hr>
      <span class="text-capitalize"> <strong>Curtain</strong> </span>
      <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
      </ul>
    </div> 
  </div>
</div>

What am I doing wrong?

Upvotes: 0

Answers (3)

Partha Paul

Reputation: 309

You can use 'col-sm-3' to align 4 elements in one line, since in bootstrap each line contains 12 virtual columns, so divide it into 4 parts of 3 columns each:

<body>
    <div class="container-fluid">      
    <!--The .container-fluid class provides a full-width container which spans the entire width of the viewport.-->
        <div class="row">
            <div class="col">          <!--remove 'col-md-2' from your code-->
                <div class="dropdown col-sm-3">
                    <!--Your content-->
                </div>

                <div class="dropdown col-sm-3">
                    <!--Your content-->
                </div>

                <div class="dropdown col-sm-3">
                    <!--Your content-->
                </div>  

                <div class="dropdown col-sm-3">
                    <!--Your content-->
                </div>
            </div>
        </div>
    <div>
</body>

• For large screens you can use col-md-3 in place of col-sm-3.

Upvotes: 0

Nitheesh

Reputation: 19986

Are you looking to align the drop-downs adjacent to each other? Then the required css is display: flex; flex-direction: row; You can get it by using the d-flex class for the dropdown container.

Edit: If you want 4 items in a row please make use of col-3 class for the same

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">        
    <div class="col-3">
      <div class="dropdown">
        <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
          <img src="https://cdn0.iconfinder.com/data/icons/avatar-vol-2-4/512/8-512.png" style=" border-radius: 50%;  height: 150px; ">    
        </button><hr>
        <span class="text-capitalize"><strong>Bed Sheet</strong></span>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
        </ul>
      </div>  
    </div>  
    <div class="col-3">
      <div class="dropdown">
        <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
          <img src="https://cdn0.iconfinder.com/data/icons/avatar-vol-2-4/512/8-512.png" style=" border-radius: 50%;  height: 150px;">    
        </button><hr>
        <span class="text-capitalize"> <strong>Curtain</strong> </span>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
        </ul>
      </div> 
    </div>
    <div class="col-3">
      <div class="dropdown">
        <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
          <img src="https://cdn0.iconfinder.com/data/icons/avatar-vol-2-4/512/8-512.png" style=" border-radius: 50%;  height: 150px;">    
        </button><hr>
        <span class="text-capitalize"> <strong>Curtain</strong> </span>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
        </ul>
      </div> 
    </div>
    <div class="col-3">
      <div class="dropdown">
        <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
          <img src="https://cdn0.iconfinder.com/data/icons/avatar-vol-2-4/512/8-512.png" style=" border-radius: 50%;  height: 150px;">    
        </button><hr>
        <span class="text-capitalize"> <strong>Curtain</strong> </span>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
        </ul>
      </div> 
    </div>
    <div class="col-3">
      <div class="dropdown">
        <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
          <img src="https://cdn0.iconfinder.com/data/icons/avatar-vol-2-4/512/8-512.png" style=" border-radius: 50%;  height: 150px;">    
        </button><hr>
        <span class="text-capitalize"> <strong>Curtain</strong> </span>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
        </ul>
      </div> 
    </div>
    <div class="col-3">
      <div class="dropdown">
        <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
          <img src="https://cdn0.iconfinder.com/data/icons/avatar-vol-2-4/512/8-512.png" style=" border-radius: 50%;  height: 150px;">    
        </button><hr>
        <span class="text-capitalize"> <strong>Curtain</strong> </span>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
        </ul>
      </div> 
    </div>
  </div>
</div>

Upvotes: 2

Finrod

Reputation: 2550

You have declared only one column, you should have a div class="col" for each image:

<!-- Product cards -->
<div class="row">        
  <div class="col col-md-2 ">
    <div class="dropdown">
      ...
    </div>    
  </div>    

  <div class="col col-md-2 ">
    <div class="dropdown">
      ...
    </div> 
  </div>
</div>

Upvotes: 1

bootstrap- image are not align to the top

Answers (3)

Related Questions