If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Mar 2016
    Member #

    multiple align to top-center with bootstrap

    Hi. I am new to bootstrap and couldn't find an answer on the web.

    I need to align the second div on the right. and the third on the left.

    It should be placed at the top center.

    Then the forth div should be right under the 3rd div. and the fifth would be just under the fourth.
    I have this code:
    HTML Code:
       <div class="container">
    <form action="{{ route('search') }}" method="post">
            <!--the form action is the method in a route called search -->
            {!! csrf_field() !!} @section('search_box')
            <div class="search_box_area col-xs-3 pagination-centered">
                <form class="form-wrapper cf">
                    <input type="text" placeholder="Search for name/user..." required> &nbsp; Or:
    <a href="#" class="button button-circle button-flat-action">Search
    </a>     </form>
            <div class="second_select">
        <!-- preferences search: -->
        <select id="select_preferences" multiple="multiple">
            <option class="options" value="Anaerobic"> Do Anaerobic Routines</option>
            <option class="options" value="Aerobic">Do Aerobic Routines</option>
            <option class="options" value="Diet">Diet Healthy</option>
            <!-- html code for age-range selector -->
    <div id="range-div" class="hide">
    <div id="range-options" class="hide-2">
    <label for="amount">within the ages:</label>
    <br><br><input id="amount">
    <a href="#" class="button button-circle button-flat-action">Search</a>


  3. #2
    Junior Member cocoondesign's Avatar
    Join Date
    Mar 2016
    Member #
    1 times
    Your 3rd div is inside 2nd div, if you want to place 2nd div on right and 3rd, 4th, 5th on left the simplest way is pacing the div as below ,

    <div> <!-- New left div -->
    <div></div> <!-- 3rd div -->
    <div></div> <!-- 4th div -->
    <div></div> <!-- 5th div -->
    <div></div> <!-- 2nd div -->

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 05:39 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: