CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Wojtkovy
Wojtkovy

Reputation: 111

Bootstrap - button display on mobile & desktop

How can I change buttons below to display correctly on phones?

HTML

<div class="container-fluid bg-1 text-center">
    <div class="row text-center" style="display:inline">
        <div class="col-lg-12">
            <div class="col-lg-4" style="float:right;">
                <a href="#" class="btn btn-outlined btn-white btn-lg" data-wow-delay="0.7s">QUESTIONS AND ANSWERS</a>
            </div>
            <div class="col-lg-4">
                <a href="#" class="btn btn-outlined btn-white btn-lg" data-wow-delay="0.7s">REGISTER</a>
            </div>
            <div class="col-lg-4">
                <a href="#" class="btn btn-outlined btn-white btn-lg" data-wow-delay="0.7s">CONTACT</a>
            </div>
        </div>
    </div>          
</div>

CSS

.btn {
    letter-spacing: 1px;
    text-decoration: none;
    background: none;
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
    white-space: nowrap;
    font-size:14px;
    line-height:20px;
    font-weight:700;
    text-transform:uppercase;
    border: 3px solid;
    padding:8px 20px;

    margin-top:10px;}

.btn-outlined {
    border-radius: 0;
    -webkit-transition: all 0.3s;
       -moz-transition: all 0.3s;
            transition: all 0.3s;}

.btn-outlined.btn-white {
    background: none;
    color: #FFFFFF;
    border-color: #FFFFFF;}

.btn-outlined.btn-white:hover,
.btn-outlined.btn-white:active {
    color: #6f5499;
    background: #FFFFFF;
    border-color: #FFFFFF;}

.btn-xs {
    font-size:11px;
    line-height:14px;
    border: 1px solid;
    padding:5px 10px;}

.btn-sm {
    font-size:12px;
    line-height:16px;
    border: 2px solid;
    padding:8px 15px;}

.btn-lg {
    font-size:18px;
    line-height:22px;
    border: 4px solid;
    padding:13px 40px;}

I want effect on desktop:

good_mobile

+ responsive buttons on phones with full text display. I think the problem is with grids, but when I change to other values I get the same issue.

Upvotes: 2

Views: 3320

Answers (2)

Joe Lloyd
Joe Lloyd

Reputation: 22353

Use bootstraps built in hidden and visible classes

To see only on mobile

Class="visible-xs"

Hide on mobile

Class = "hidden-xs"

There are also sm, md and lg vertions of the classes for tablet, medium desktop and large desktop.

These classes are very handy but you may need custom media queries.

Upvotes: 3

shreyansh
shreyansh

Reputation: 1687

check below

.btn-lg
.btn-md
.btn-sm
.btn-xs

lg-Large, md-Medium, sm-small, xs-extra small

see below link may be it is useful for you

Media Queries: How to target desktop, tablet and mobile?

Upvotes: 0

Related Questions