Is sometimes Bootstrap not the best?

[sinus]

I have finally almost finished the app, what Thorsten started for me.
Though I did not solved really the problem with adding the total of one field of all selected files (adding "Total-2" from all selected files into "Total vor Mwst" from the focussed file), but this is another small problem, what I am trying to track down (Mario and Thorsten gave me some good hints, but I am still not successful).
But this is another problem, not important for now, because I can simply add this field by head  and write it into the field).

But here my question is:
Thorsten did use for this Bootstrap, what seems to be a cool thing.
I have read also the manual for tables (this is a table) with inverse, small, striped and so on.

But one thing I could not solve.
As you see in my attachement, the labels from each input-field is quite a bit above from each field.
Like "RG-Nummer" in should go much nearer down to the field below.

I did really not see a possibilty to solve this.
Hence my question:

Is it for design-things like this maybe better, if I would use not Bootstrap, but plain HTML?
I think, that with plain html I could do this (though not sure).

But is this a good idea or is it better to stay with Bootstrap?
Finally it looks good for me but I could get also some room (I have set the preferences to "-2" to get the whole app in one window without need to scroll down.
I think, Mario has written once "users wants always more and more ..." 


See attachement and the code for the line with "RG-Nummer" is as an example here:

Code Select Expand

<!-- Now we build a table for the input fields and all calculated fields. -->
<!-- These are encapsulated in a form, styled with some standard Bootstrap CSS classes.  -->
    <form class="form-group form-group-sm" lang="de">
    <div id="input-table" class="table-responsive" style="background-color:rgb(222,222,222)">
<table class="table table-striped table-hover table-condensed">

<tbody>
        <!-- This row contains the lables only. Use the 'for' attribute to reference the 'id' of the input field  -->
<!-- LABELS: LS-RG Datum und Nummern --> 
<tr style="font-size:14px; color: rgb(90,90,90); background-color:rgb(222,222,222);">
                <td> <style="font-size:14px; color: rgb(90,90,90); background-color:rgb(222,222,222);" for="attr_lsdat">LS-Datum</label> </td>
                <td> <style="font-size:14px; color: rgb(90,90,90); background-color:rgb(222,222,222);" for="attr_lsnr">LS-Nummer</label> </td>
        <td> <style="font-size:14px; color: rgb(90,90,90); background-color:rgb(222,222,222);" for="attr_rgdat">RG-Datum</label> </td>
        <td> <style="font-size:14px; color: rgb(90,90,90); background-color:rgb(222,222,222);" for="attr_rgnr">RG-Nummer</label> </td>
        </tr>

<!-- FELDER: LS-RG Datum und Nummern --> 
<tr>
<td colspan="1"><input class="form-control" style="color:rgb(0,0,90); background-color:rgb(255,170,150); font-size:14.8px" type="text" name="attr_lsdat" id="attr_lsdat"></td>
<td colspan="1"><input class="form-control" style="color:rgb(0,0,90); background-color:rgb(165,220,250); font-size:14.8px" type="number" name="attr_lsnr" id="attr_lsnr"></td>
<td colspan="1"><input class="form-control" style="color:rgb(0,0,90); background-color:rgb(255,170,150); font-size:14.8px" type="text" name="attr_rgdat" id="attr_rgdat"></td>
<td colspan="1"><input class="form-control" style="color:rgb(0,0,90); background-color:rgb(255,170,150); font-size:14.8px" type="number" name="attr_rgnr" id="attr_rgnr"></td>
</tr>

[Mario]

Looks good to me. Neat. Colors in the last row melt my eyes 

You are mixing tables with forms in a (probably) responsive layout. Always tricky. Tables are usually for output only. And, Bootstrap is a "mobile first" framework so it is designed to work on all kinds of mobile devices and large screens (computers, TVs) are then added on top of that. This requires some compromises and 'pixel-perfect' layouts are impossible in that context.

I would not combine forms with tables, though.
Use the responsive grid system in bootstrap with <div class="row"> and <div class="col-xs-3">  and similar.
This allows you to create nice grids (much like tables) but responsive and with more options.
Each row has up to 12 columns, and you can control the width of each column, if and how they wrap etc.

How it works:

https://getbootstrap.com/docs/3.3/css/#grid

Examples:

https://getbootstrap.com/docs/3.3/examples/grid/

This works around the limitations of tables.

[sinus]

Looks good to me. Neat. Colors in the last row melt my eyes 

Thanks!  I think, neat means positive.
And melt my eyes means not that good. 
To be honest, I wanted change the two buttons (Cancel, Save) with not "that cying" colors, more subtle.
But I hade made the screenshot already and thougth, ok, send it. 

But if you mean this with "melt" I fully agree.

I would not combine forms with tables, though.
Use the responsive grid system in bootstrap with <div class="row"> and <div class="col-xs-3">  and similar.
This allows you to create nice grids (much like tables) but responsive and with more options.
Each row has up to 12 columns, and you can control the width of each column, if and how they wrap etc.

How it works:

https://getbootstrap.com/docs/3.3/css/#grid

Examples:

https://getbootstrap.com/docs/3.3/examples/grid/

This works around the limitations of tables.

Ah, this sounds good to me.
I will, as soon I have time and I am relaxed, I will try to do so.
But since this app works fine and finally looks quite good, I have time.