Best way to make search full width

Question

First time using this component, and I am looking to make the search input box full width.

What would be the best way to accomplish this? Is it plain CSS, or is there an option in the script?

Here is my current script that generates the table

   initializeBootstrapTable() {
            let $table = jQuery(this.$refs.table);

            jQuery.fn.bootstrapTable.columnDefaults.formatter = function(value, row, index) {
                if(typeof(value) === 'boolean') {
                    return value ? 'Yes' : 'No';
                }

                if(value === 'ug') {
                    return 'UG';
                }

                if(value === 'pg') {
                    return 'PG';
                }

                return value;
            };

            $table.bootstrapTable({
                data: this.applicants,
                showColumns: true,
                toolbarAlign: 'right',
                buttonsAlign: 'right',
                pagination: true,
                search: true,
                iconsPrefix: 'fa',
                icons: {
                    paginationSwitchDown: 'fa-collapse-down icon-chevron-down',
                    paginationSwitchUp: 'fa-collapse-up icon-chevron-up',
                    refresh: 'fa-refresh icon-refresh',
                    toggle: 'fa-list-alt icon-list-alt',
                    columns: 'fa-th icon-th',
                    detailOpen: 'fa-plus icon-plus',
                    detailClose: 'fa-minus icon-minus'
                }
            });

            $table.on('click-row.bs.table', (e, row) => this.handleApplicantSelection(row));
        }

Thanks!

Answer 1

There doesn't seem to be an option to remove the float, it's either choose left or right looking at the options. Instead, add the BS4 no float class. JS is a good approach here.

Vanilla:

var d = document.getElementById("my-search");
d.className += " float-none";

jQuery

$("#my-search").addClass('float-none');

Plain CSS

#my-search {
  float:none;
}

If you must, you can use the !important rule too.