CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
Amir Meimari
Amir Meimari

Reputation: 538

Bootstrap element not hidden

I wanna hidden search box in Small Devices(sm) size and instead of that a search button should take place. i wanna my search be like this at sm size. enter image description here

this is my code:

    <div class="container">
        <div class="header">
            <div class="row">
                <div class="col-md-3 ">
                    <img src="img/1.png" class="header-logo" alt="site-logo">
                </div>
                <div class="col-md-6">
                    <div class="input-group search-box">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fas fa-search"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control" placeholder="جستجو">
                    </div>
                </div>

                <div class="col-md-3 btn-header">
                    <button class="btn">ورود</button>
                    <button class="btn">ثبت نام</button>
                </div>
            </div>

</div><!-- =====HEADER DIV===== -->
    </div>

Upvotes: 0

Views: 752

Answers (2)

Gobli
Gobli

Reputation: 347

To show or hide elements with bootstrap you have to use the display utilities. For example, if you want to show only on Small Devices you must use d-none d-block d-sm-none.

Your code would be like this:

 <div class="container">
        <div class="header">
            <div class="row">
                <div class="col-md-3 ">
                    <img src="img/1.png" class="header-logo" alt="site-logo">
                </div>
                <div class="col-md-6 d-none d-md-block">
                    <div class="input-group search-box">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fas fa-search"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control" placeholder="جستجو">
                    </div>
                </div>

                <div class="col-md-3 btn-header d-sm-none">
                    <button class="btn">ورود</button>
                    <button class="btn">ثبت نام</button>
                </div>
            </div>

</div><!-- =====HEADER DIV===== -->
    </div>

You can find the doc here: https://getbootstrap.com/docs/4.0/utilities/display/

Upvotes: 1

Lasantha
Lasantha

Reputation: 268

Use

hidden-sm

for more details follow https://getbootstrap.com/docs/3.3/css/ 

            <div class="input-group search-box">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <i class="fas fa-search"></i>
                        </span>
                    </div>
                    <!-- your search field is hidden in the sm -->
                    <input type="text" class="form-control hidden-sm" placeholder="جستجو">
                </div>

Devices list

  • Extra small devices - Phones (<768px)
  • Small devices - Tablets (≥768px)
  • Medium devices -Desktops (≥992px)
  • Large devices -Desktops (≥1200px)

Upvotes: 2

Related Questions