Search code examples
bootstrap-5bootstrap-gridbootstrap-icons

Bootstrap Bigger Icon

in the screenshot below, i have tried to add 2 button icons in 2 different columns which are also children of a row.

I want that buttons to fit as much as big they can in the column as you see. screenshot

Here is my code for that specific row;

  <div class="row">
                                <div class="col-md-6 mb-3 text-start">
                                    <label for="departure">VIP ($7000):</label>
                                    <input type="number" class="form-control" id="departure" placeholder="0" value="" required>
                                </div>
                                <div class="col-md-3 align-self-center">
                                    <i class="bi bi-plus-circle-fill"></i>
                                </div>
                                <div class="col-md-3 align-self-center">
                                    <i class="bi bi-plus-circle-fill "></i>
                                </div>

I have tried some things but couldn't get the proper design

Solution

  • The font-size CSS options will work best.

    So you could do.

    i{
font-size: 50px;
}

    The above will affect all icon tags and probably all HTML5 italic tags too.

    Or you can add a Class to your icons. The CSS would be....

    i .big-icon{
font-size: 50px;
}

    With the HTML being....

    <i class="bi bi-plus-circle-fill big-icon"></i>

    Here is a link to the GetBootstrap Docs....

    https://icons.getbootstrap.com/#styling