Bootstrap Bigger Icon

Question

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.

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

Answer 1

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