Bootstrap grid system issue on devices below 768px

I'm trying to create a responsive webpage with bootstrap, but the problem is that the grid system of bootstrap doesn't work right in class="col-x" i have given 2 elements. col-md-xx , col-lg-xx and col-sm-xx are working fine as i want.
This is how it look like right now :

And this is what I want it to be :

**Summary : I want those blue and green buttons come in front of the image. image is in left side and buttons should be in the right side. **

my source :

* {
    text-decoration: none !important;
}

.header {
    padding: 16px 58px 21px 58px;
}

.logoDiv {
    float: left;
}

.logoDiv img {
    float: left;
}

.TopBtns {
    float: right;
}

.buybtn {
    margin-bottom: 5px;
    margin-top: 10px;
    width: 300px;
}

.usersbtn {
    width: 300px;
}


.TopBtns  {
    float: right;
}

/* Start Search Bar */

.searchForm {
    margin-top: 20px;
    direction: ltr !important;
    text-align: center;
}

.dropdown-menu {
    direction: ltr !important;
}

.dropdown.dropdown-lg .dropdown-menu {
    margin-top: -1px;
    padding: 6px 20px;
}

.input-group-btn .btn-group {
    display: flex !important;
}
.btn-group .btn {
    border-radius: 0;
    margin-left: -1px;
}
.btn-group .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}
.form-group .form-control:last-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}


/* End Search Bar */
.navbar {
    background-color: #fdfdfd;
    -moz-box-shadow: 0 2px 8px rgb(189, 189, 189);
    -webkit-box-shadow: 0 2px 8px rgb(189, 189, 189);
    box-shadow: 0 2px 8px rgb(189, 189, 189);
    border-radius: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

@media screen and (max-width: 1172px){
    #adv-search {
        width: 400px;
    }
}

@media screen and (max-width: 992px){
    #adv-search {
        width: 300px;
    }

    .header {
        padding: 16px 32px 21px 32px;
    }
}

@media screen and (max-width: 768px){
    #adv-search {
        width: 100%;
    }

    .searchForm {
        width: 100%;
        float: none;
    }

    .TopBtns {
        float: none;
    }

    .header {
        padding: 16px 16px 21px 16px;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="header">
        <div class="row">
            <div class="logoDiv col-lg-3 col-md-3 col-sm-3 col-6">
                <img src="https://image.ibb.co/mp0505/logo.png"/>
            </div>
            <div class="TopBtns col-lg-3 col-md-3 col-sm-3 col-2">
                <div class="btn-group-justified btn-group-success">
                    <div class="dropdown buybtn">
                        <button class="btn btn-success  dropdown-toggle" type="button" data-toggle="dropdown">
                            <i class="fa fa-shopping-bag"></i>
                            سلام سلام
                            <i class="fa fa-caret-down"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">Dropdown header 1</li>
                            <li><a href="#">HTML</a></li>
                        </ul>
                    </div>
                    <div class="dropdown usersbtn">
                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                            <i class="fa fa-user"></i>
                            سلام سلام
                            <i class="fa fa-caret-down"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">Dropdown header 1</li>
                            <li><a href="#">HTML</a></li>
                         </ul>
                    </div>
                </div>
            </div>

            <div class="searchForm col-lg-6 col-md-6 col-sm-6 col-12">
                <div class="input-group" id="adv-search">
                    <div class="input-group-btn">
                        <div class="btn-group" role="group">
                            <div class="dropdown dropdown-lg">
                                <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"
                                                                                    aria-hidden="true"></span></button>

                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                        aria-expanded="false"><span class="caret"></span></button>
                                <div class="dropdown-menu dropdown-menu-right" role="menu">
                                    <form class="form-horizontal" role="form">
                                        <div class="form-group">
                                            <label for="filter">Filter by</label>
                                            <select class="form-control">
                                                <option value="0" selected>All Snippets</option>
                                                <option value="1">Featured</option>
                                                <option value="2">Most popular</option>
                                                <option value="3">Top rated</option>
                                                <option value="4">Most commented</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="contain">Author</label>
                                            <input class="form-control" type="text"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="contain">Contains the words</label>
                                            <input class="form-control" type="text"/>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input type="text" class="form-control" placeholder="Search for snippets"/>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 3

Answers (3)

user7563770

Reputation:

use this
<div class="logoDiv col-sm-3 col-xs-6"></div> <div class="TopBtns col-sm-3 col-xs-2"></div>

instead of

<div class="logoDiv col-lg-3 col-md-3 col-sm-3 col-6"></div> <div class="TopBtns col-lg-3 col-md-3 col-sm-3 col-2"></div>

Upvotes: 1

claudios

Reputation: 6666

Try to change your col-6 and col-2 classes to col-xs-6. You could also read more how bootstrap grid works. And also to our buttons, avoid using fix width. Just remove it.

Update: Add btn-block to your buttons if you want it to occupy the whole column. Also please separate your search bar to another row.

* {
    text-decoration: none !important;
}

.header {
    padding: 16px 58px 21px 58px;
}

.logoDiv {
    float: left;
}

.logoDiv img {
    float: left;
}

.TopBtns {
    float: right;
}

.buybtn {
    margin-bottom: 5px;
    margin-top: 10px;
}

.TopBtns  {
    float: right;
}

/* Start Search Bar */

.searchForm {
    margin-top: 20px;
    direction: ltr !important;
    text-align: center;
}

.dropdown-menu {
    direction: ltr !important;
}

.dropdown.dropdown-lg .dropdown-menu {
    margin-top: -1px;
    padding: 6px 20px;
}

.input-group-btn .btn-group {
    display: flex !important;
}
.btn-group .btn {
    border-radius: 0;
    margin-left: -1px;
}
.btn-group .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}
.form-group .form-control:last-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}


/* End Search Bar */
.navbar {
    background-color: #fdfdfd;
    -moz-box-shadow: 0 2px 8px rgb(189, 189, 189);
    -webkit-box-shadow: 0 2px 8px rgb(189, 189, 189);
    box-shadow: 0 2px 8px rgb(189, 189, 189);
    border-radius: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

@media screen and (max-width: 1172px){
    #adv-search {
        width: 400px;
    }
}

@media screen and (max-width: 992px){
    #adv-search {
        width: 300px;
    }

    .header {
        padding: 16px 32px 21px 32px;
    }
}

@media screen and (max-width: 768px){
    #adv-search {
        width: 100%;
    }

    .searchForm {
        width: 100%;
        float: none;
    }

    .TopBtns {
        float: none;
    }

    .header {
        padding: 16px 16px 21px 16px;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="header">
        <div class="row">
            <div class="logoDiv col-lg-3 col-md-3 col-sm-3 col-xs-6">
                <img src="https://image.ibb.co/mp0505/logo.png"/>
            </div>
            <div class="TopBtns col-lg-3 col-md-3 col-sm-3 col-xs-6 text-right">
                <div class="btn-group-justified btn-group-success">
                    <div class="dropdown buybtn">
                        <button class="btn btn-success btn-block  dropdown-toggle" type="button" data-toggle="dropdown">
                            <i class="fa fa-shopping-bag"></i>
                            سلام سلام
                            <i class="fa fa-caret-down"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">Dropdown header 1</li>
                            <li><a href="#">HTML</a></li>
                        </ul>
                    </div>
                    <div class="dropdown usersbtn">
                        <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
                            <i class="fa fa-user"></i>
                            سلام سلام
                            <i class="fa fa-caret-down"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">Dropdown header 1</li>
                            <li><a href="#">HTML</a></li>
                         </ul>
                    </div>
                </div>
            </div>

            <div class="searchForm col-lg-6 col-md-6 col-sm-6 col-12">
                <div class="input-group" id="adv-search">
                    <div class="input-group-btn">
                        <div class="btn-group" role="group">
                            <div class="dropdown dropdown-lg">
                                <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"
                                                                                    aria-hidden="true"></span></button>

                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                        aria-expanded="false"><span class="caret"></span></button>
                                <div class="dropdown-menu dropdown-menu-right" role="menu">
                                    <form class="form-horizontal" role="form">
                                        <div class="form-group">
                                            <label for="filter">Filter by</label>
                                            <select class="form-control">
                                                <option value="0" selected>All Snippets</option>
                                                <option value="1">Featured</option>
                                                <option value="2">Most popular</option>
                                                <option value="3">Top rated</option>
                                                <option value="4">Most commented</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="contain">Author</label>
                                            <input class="form-control" type="text"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="contain">Contains the words</label>
                                            <input class="form-control" type="text"/>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input type="text" class="form-control" placeholder="Search for snippets"/>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 3

BeeLee

Reputation: 193

Put your image and the group of buttons on a div and use flexbox. After set up your image to float:left and the group of buttons to float: right. It should work ;)

Upvotes: 1

Bootstrap grid system issue on devices below 768px

Answers (3)

Related Questions