CODEWITHSUNDEEP
htmltwitter-bootstrapcsstwitter-bootstrap-3
mcrav
mcrav

Reputation: 69

How to keep buttons from stacking?

In my code below, an incredibly early draft, I'm basically trying to get the positioning for a few things. I've got the general flow minus the last two sections but I've hit an issue.

Everything is responsive thanks to bootstrap however when the browser is made small enough the buttons will stack. If you go to 'google.com', rather than stacking the page will just cut off which I think looks better (it will still adapt to the browser window size though).

How can I modify my code to do the same thing or at the very least not look like a jumbled mess when the browser window is small? Also any thoughts on this? I'm not a designer at heart so maybe the page cutting off after a certain point may not be the way to go.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/bootstrap.css" rel="stylesheet">
    <title>Noted!</title>
</head>
<body>

<section class='container-fluid'>
    <div class='row-fluid'>
        <div class='col-md-4'>
            <h1>logo</h1>
        </div>
        <div class='col-md-4 col-md-offset-4'>
            <button>login</button>
        </div>
    </div>
</section>

<section class='container'>
    <div class='text-center'>
        <h1>motto here</h1>
    </div>
    <div class='row' class='text-center'>
        <div class='col-md-3 col-md-offset-3'>
            <button>facebook button</button>
        </div>
        <div class='col-md-3'>
            <button>twitter button</button>
        </div>
    </div>
</section>

<section class='container'>
    <h1>about us and icons</h1>
</section>

<section class='container-fluid'>
    <h1>footer mate</h1>
</section>


</body>

<!-- don't forget to link the angular file -->
</html>

Upvotes: 0

Views: 892

Answers (3)

Brant Olsen
Brant Olsen

Reputation: 5664

Use col-xs-* classes instead of the col-md-* classes if you do not want things to stack on small devices. See http://getbootstrap.com/css/#grid-options for all the different page sizes and classes to use.

Note that Bootstrap does not care what type of computer you are on for the classes to apply only the screen width. See https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#width for more information on the width queries bootstrap is doing.

Upvotes: 3

Nishanth PrabhuSwamy
Nishanth PrabhuSwamy

Reputation: 85

All your button divisions currently are designed keeping in mind the medium screensize. Thus, you will need to add the along with it. Remeber xs stands for extra small.

Take a look at the below link: http://getbootstrap.com/css/#grid

This explains the grid system that is made use of by Twitter Bootstrap.

Upvotes: 0

JDB
JDB

Reputation: 25820

You could set a min-width on either a container DIV or on the BODY.

It's not necessarily the "best" option, in that your responsive design isn't adapting to certain screen sizes (meaning you've got a bigger problem), but it's an easy solution until you find a better overall design.

Upvotes: 0

Related Questions