How to adjust the size of the label in bootstrap 4 to fit the small input?

Question

How to adjust the size of the label in bootstrap 4 to fit the small input?

Navigation

#1 by (1 votes)

2

I have the code below and I do not know how to adjust the label to fit the same size set in the input element. The way the Label is has the text bigger than the Input. I've tried using the .small class but it gets smaller. Use Bootstrap 4.

<div class="form-group">
    <label class="control-label" for="nome">Nome</label>
    <input class="form-control form-control-sm inverted" type="text" id="nome">
</div>

bootstrap-4 bootstrap

asked by anonymous 28.02.2018 / 14:48

1 answer

Download button without showing your way Use Linux libraries

score 1 · Accepted Answer

I tested using Small on Label and it worked. It may be that you are having an override class problem with Bootstrap.

Anyway, see that even with the Small class working, my problem will reverse. With Small the text of Label will get smaller than the text Input . See the images to better understand (red squares).

ThentosolvetheproblemIadviseyoutoputadirectvalueintheLabelclass.Seetheexamplebelow,Soit'sallthesamesize.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name=c ontent=>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
        integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
    <style>
        label {
            display: inline-block;
            margin-bottom: .5rem;
            font-size: .875rem;
        }
    </style>
</head>

<body>

    <div class="form-group">
        <label class="control-label" for="nome">Nome</label>
        <input class="form-control form-control-sm inverted" type="text" id="nome" value="Nome">
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>