Bootstrap - button display on mobile & desktop

Question

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.

If you're using bootstrap, use col-sm-* to specify columns width on mobile. Or you can use customs media queries as well — Vincent G, Mar 27 '16 at 09:30

score 3 · Answer 1 · answered Mar 28 '16 at 08:23

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.

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

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?

edited May 23 '17 at 11:52

Community

1
1

answered Mar 27 '16 at 09:36

shreyansh

1,637
4
26
46

Bootstrap - button display on mobile & desktop

2 Answers2