How to custom width of a filter input search using Bootstrap 4?

michelmir

Hello!

I'm working with Datatable 1.10.19 with Bootstrap 4 style. I would like to increase width of filter input search using Bootstrap 4 input style. In this case i'm using dom code to align elements on top and bottom of table:

"dom": "<'row '<'col-sm-12 col-md-6'B><'col-sm-12 col-md-6'f>>"
        +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

But i can't find a way to modify the input filter search. Is this case i have to modify using dom code or i have to use css code? Thanks.

allan

$.fn.DataTable.ext.classes.sFilterInput = "form-control form-control-lg";

Could be used to change the input to a Bootstrap large input. But if you wanted custom control over the width, then yes a line or two of CSS would be the way to do it.

Allan

zddt

I'm new to this and I'd like to know that how would the CSS look like?

.dataTables_filter input { width: 400px } works with the DataTables styling, but not with
the bootstrap 4 styling on my side.