Awesome q2a theme

How to override native bootstrap styles using your class?

0 like 0 dislike
44 views
Found similar answers on the Internet but until the end I can not understand how to override all the elements in the structure using your class.
Not using the property !important not to modify the style file bootstrap. Removing your class .stats_table all changes have to go back to the standard prescribed by the framework
A similar problem can be found everywhere in bootstrap, not only in the tables.
Explain with an example
There is a standard table using bootstrap I want your class .stats_table to control the indentation of table elements (tr, td).
1 500 
*< .90 000bobbed hair7 200seconds time masters500 000 *likes and compliments

.stats_table{ display:flex; flex-grow: 1; padding:0; } .stats_table tbody{ display:flex; flex-direction: row; flex-wrap: wrap; } .stats_table tr{ width:50%; display:block; padding-left:37px; padding-top:32px; padding-bottom:31px; border: 3px solid red; } .stats_table td{ display:block; width:auto; border-top:0; padding:25px; border-top:3px solid green; }

Description
My class .completely redefined stats_table tr - all is well
My class .stats_table no (unless using !important) napriobretenie td-cell.

From the developer dashboard I see the following;
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd; } / * ------- Crossed all that concerns madingou and border*/ .stats_table td { display: block; width: auto; border-top: 0; padding: 25px; border-top: 3px solid green; }
by | 44 views

3 Answers

0 like 0 dislike
create a file custom.css, plug it AFTER!!! call stylesheets bootstrap, in it write:
.stats_table {} .stats_table tr {} .stats_table td {} /* and so on */

overwrite in that file, indentation, and other properties. If you disable this file, the styles will be reset.
by
0 like 0 dislike
Override classes in your stylesheet as in the original bootstrap, i.e. not just
.stats_table td { your value here }
and
.stats_table.table>tbody>tr>td { your value here }

ie to the bootstrap styles you want to override using your class, add it in front of the bootstrap class without a space. If you want to globally override the bootstrap class, then copy unchanged
.table>tbody>tr>td { your value here }
by
0 like 0 dislike
From the developer dashboard I see the following;

Here the key to solving the problem. Repeat selectors completely and replace them .table on .stats_table. Pollucite your styles after bootstraps.
by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
110,608 questions
257,187 answers
0 comments
40,796 users