Search code examples
bootstrap-4bootstrap-studio

Stacking columns and merging rows on Bootstrap 4

Im working in Bootstrap Studio and tying to understand Bootstrap (v4.x) and flexbox. Flexbox doesnt make things easier. As many persons have tried, and asked here on Stack, im also trying to get columns to behave properly... So far no luck.

Desktop view
Logo | Search bar | icons

Mobile view (sm and lower)
Logo | icons
Search (100%)

I've tried possibly everything except the right thing... Ive played with flexbox 'order'/ push/pull, etc...

Maybe im approaching this from the wrong side... 'They' say that bootstrap is 'mobile-first'. So the code must be written as "Logo | icons | Search" or the desktop way?

<html><head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
</head>
<body>
  <div class="container" id="header">
    <div class="row">
      <div class="col-sm-3" id="logo">Logo</div>
      <div class="col-sm-6" id="search">
        <form>
          <div class="form-group"><input type="search" class="form-control" name="search" placeholder="Zoeken..." /></div>
        </form>
      </div>
      <div class="col-sm-3 justify-content-lg-end justify-content-xl-end">
        <div class="btn-toolbar">
          <div role="group" class="btn-group"><a class="btn btn-lg" role="button" href="#">Icon</a><a class="btn btn-lg" role="button" href="#"><i class="fas fa-chart-bar"></i></a>
            <div class="dropdown btn-group" role="group"><a class="btn btn-lg" data-toggle="dropdown" aria-expanded="false" role="button">icon</i></a>
              <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#">Account</a><a class="dropdown-item" href="#">test</a><a class="dropdown-item" href="#">Log uit...</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Solution

  • Whenever you have a question, check Bootstrap documentation first. It contains lost of information, which might contain the fix you're looking for: Order class

    Before going into the fix, I want to point out that Mobile First approach is that you focus and build the views on mobile devices, and then you override those styles to make sure it will work on desktop or larger screens as well. That way you make sure your app looks nice even in narrow screens.

    If you do Mobile First, the layout should look like:

    <div class="container">
    <div class="row">
        <div class="col-sm-6">
            Logo
        </div>
        <div class="col-sm-6">
            <div role="group" class="btn-group">
                <a class="btn btn-lg" role="button" href="#">Icon</a>
                <a class="btn btn-lg" role="button" href="#">
                    <i class="fas fa-chart-bar"></i>
                </a>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-lg dropdown-toggle" 
                        data-toggle="dropdown">
                      Dropdown
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Account</a>
                        <a class="dropdown-item" href="#">test</a>
                        <a class="dropdown-item" href="#">Log uit...</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <form>
                <div class="form-group">
                    <input type="search" class="form-control" name="search" 
                        placeholder="Zoeken..." />
                </div>
            </form>
        </div>
    </div>
</div>

    After you get that done for mobile views, then you focus on the desktop views. The only thing I need is to change the column widths and set their orderings:

    <div class="row">
    <div class="col-sm-6 col-md-2">...</div>
    <div class="col-sm-6 col-md-5 order-md-2">...</div>
    <div class="col-sm-12 col-md-5 order-md-1">...</div>
</div>

    That's already working like what you want: https://jsfiddle.net/davidliang2008/ndsk4hL3/13/


    But my OCD is telling me you can do better. I don't know if you read the Bootstrap documentation and realize there is a component called Navbar you can use?

    enter image description here

    I don't want to do everything for you so I purposely left navbar demo as it is: https://jsfiddle.net/davidliang2008/ndsk4hL3/25/