Width/size Bootstrap buttons

Asked

Viewed 23,935 times

0

Hello, to you all! How could I put all buttons on a group of Bootstrap buttons of the same width independent of content and still remain responsive. For example I have a group of buttons: A B NA, the A button and B have the same size, whereas the NA is bigger. I would like all buttons to be the same size. Thanks

css bootstrap-3

  • I put the right example. I believe it’s what you’re looking for

1 answer

0

EDIT 1

You will need to create a custom style and include as last in the sequence. In the example below I created the small and medium styles. Note that it includes last in the sequence of Imports.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>
    <body>
        <style>
            .pequeno {
                width: 20%;
            }

            .medio {
                width: 50%;
            }
        </style>
        <div class="container">
            <h2>Button Styles</h2>
            <button type="button" class="btn btn-default pequeno">Default</button>
            <button type="button" class="btn btn-primary pequeno">Primary</button>
            <button type="button" class="btn btn-success medio">Success</button>     
        </div>
    </body>
</html>

EDIT 2

Sorry, I misread your question. Actually you want the same size regardless of the right content?

<!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Bootstrap Example</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        </head>
        <body>
            <style>
                .mesmo-tamanho {
                    width: 15%;
                    white-space: normal;
                }
            </style>
            <div class="container">
                <h2>Button Styles</h2>
                <button type="button" class="btn btn-default mesmo-tamanho">Default Default</button>
                <button type="button" class="btn btn-primary mesmo-tamanho">Primary Primary Primary Primary</button>
                <button type="button" class="btn btn-success mesmo-tamanho">Success Success Success</button>
            </div>
        </body>
    </html>

  • The problem is that the bootstrap button height remains and the source (button) is misaligned, does not center and exits to the right even putting the responsive font.

  • I did not understand, could be more specific pf?

  • If we view it on a smaller screen, the bootstrap button decreases in width but not in height. The contents of the button are not centered. The button text is further right and exits from the inside of the button.

Browser other questions tagged css bootstrap-3

You are not signed in. Login or sign up in order to post.