Solution 1 :

I am not sure what you want. But what I understand is you want to center drop down and image.

Check this…


  <h1 style="text-align:center;" class="text-left">Joeys Pizza</h1>
        <div class="row">
            <div class="col-lg-1">&nbsp;</div>
            <div class="col-lg-5 text-right">
                <select id="mySelect" title="Select a different week">
                    <option value="Option1">Option 1</option>
                    <option value="Option2">Option 2</option>
                    <option value="Option3">Option 3</option>
                    <option value="Option4">Option 4</option>
                </select>
            </div>
            <div class="col-lg-5 text-left">
                <i class="fa fa-print" style="font-size:24px"></i>
            </div>
            <div class="col-lg-1">&nbsp;</div>
        </div>

Problem :

I am learning Bootstrap and right now I am trying to center a dropdown menu and an icon to the middle of the page. I am using the grid system, but no luck. Can somebody help out?

<h1 style="text-align:center;" class="text-left">Joeys Pizza</h1>
<div class="row">
  <div class="col-lg-7">
    <select id="mySelect" title="Select a different week">
      <option value="Option1">Option 1</option>
      <option value="Option2">Option 2</option>
      <option value="Option3">Option 3</option>
      <option value="Option4">Option 4</option>
    </select>
  </div>
  <div class="col-lg-5">
    <i class="fa fa-print" style="font-size:24px"></i>
  </div>
</div>

Comments

Comment posted by mdbootstrap.com/docs/jquery/navigation/hamburger-menu

I was trying to center some content similar to this once and found it very difficult. Boostrap does have some limitations on what you can do. Here is a link to a site that might help solve future problems. Though if there isn’t a solution on here then it might be outside the limitations of Bootstrap.

Comment posted by csb00

This is very helpful -thank you. It never occurred to me of using &nbsp to use up space.

By

Leave a Reply

Your email address will not be published. Required fields are marked *