In twitter-bootstrap-3 is there any way you can use a built in bootstrap color scheme? This code wouldn't work, and I have tried "Active" and "Success" for colors
instead of background-color
, but they didn't work.
example table
dippas
56.4k15 gold badges113 silver badges122 bronze badges
asked Jun 2, 2016 at 22:03
0
Bootstrap has some built in Contextual backgrounds which can be added to any element
Hello
Hello
Hello
Hello
Hello
Also,
you're code example doesn't work because you're adding css in the class
attribute vs the style
attribute.. should look like this instead
answered Jun 2, 2016 at 22:05
im_brian_dim_brian_d
8,6602 gold badges27 silver badges46 bronze badges
you can use .table-striped
class, that makes zebra style.
Firstname
Lastname
Email
John
Doe
Mary
Moe
July
Dooley
OR
if you want more than 2 colors you can use
Contextual classes, which you can apply to tr
or td
Firstname
Lastname
Email
John
Doe
Mary
Moe
July
Dooley
answered Jun 2, 2016 at 22:07
dippasdippas
56.4k15 gold badges113 silver badges122 bronze badges
1
Documentation and examples for opt-in styling of tables [given their prevalent use in JavaScript plugins] with Bootstrap.
Examples
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table
to any , then extend with custom styles or our various included modifier classes.Using the most basic table markup,
here’s how .table
-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.
#FirstLastHandle 1Mark
Otto
@mdo
2Jacob
Thornton
@fat
3Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
You can also invert the colors—with light text on dark backgrounds—with .table-dark
.
#FirstLastHandle 1Mark
Otto
@mdo
2Jacob
Thornton
@fat
3Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Table head options
Similar to tables and dark tables, use the modifier classes
.thead-light
or .thead-dark
to make s appear light or dark gray.
#FirstLastHandle 1 Mark
Otto
@mdo
2 Jacob
Thornton
@fat
3 Larry
the Bird
@twitter
#FirstLastHandle 1 Mark
Otto
@mdo
2 Jacob
Thornton
@fat
3 Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Striped rows
Use
Add
Add
Add
Use contextual classes to color table rows or individual cells.
Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.
Conveying meaning to assistive technologies Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself [e.g. the visible text], or is included through alternative means, such as additional text hidden
with the Create responsive tables by wrapping any Note that since browsers do not currently support range context queries, we work around the limitations of
A
List of users Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a Vertical clipping/truncation Responsive tables make use of Across every breakpoint, use
Use
.table-striped
to add zebra-striping to any table row within the .
#FirstLastHandle 1 Mark
Otto
@mdo
2 Jacob
Thornton
@fat
3 Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#FirstLastHandle 1 Mark
Otto
@mdo
2 Jacob
Thornton
@fat
3 Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Bordered table
.table-bordered
for borders on all sides of the table and cells.#FirstLastHandle 1 Mark
Otto
@mdo
2 Jacob
Thornton
@fat
3 Larry the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
#FirstLastHandle 1 Mark
Otto
@mdo
2 Jacob
Thornton
@fat
3 Larry the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Hoverable rows
.table-hover
to enable a hover state on table rows within a .
#FirstLastHandle 1 Mark
Otto
@mdo
2 Jacob
Thornton
@fat
3 Larry the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
#FirstLastHandle 1 Mark
Otto
@mdo
2 Jacob
Thornton
@fat
3 Larry the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Small table
.table-sm
to make tables more compact by cutting cell padding in half.#FirstLastHandle 1 Mark
Otto
@mdo
2 Jacob
Thornton
@fat
3 Larry the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
#FirstLastHandle 1 Mark
Otto
@mdo
2 Jacob
Thornton
@fat
3 Larry the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Contextual classes
ClassHeadingHeading Active Cell
Cell
Default Cell
Cell
Primary Cell
Cell
Secondary Cell
Cell
Success Cell
Cell
Danger Cell
Cell
Warning Cell
Cell
Info Cell
Cell
Light Cell
Cell
Dark Cell
Cell
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
#HeadingHeading 1 Cell
Cell
2 Cell
Cell
3 Cell
Cell
4 Cell
Cell
5 Cell
Cell
6 Cell
Cell
7 Cell
Cell
8 Cell
Cell
9 Cell
Cell
...
...
...
...
...
...
...
...
...
...
.sr-only
class..table
with .table-responsive{-sm|-md|-lg|-xl}
, making the table scroll horizontally at each max-width
breakpoint of up to [but not including] 576px, 768px, 992px, and 1120px, respectively.min-
and max-
prefixes and viewports with fractional widths [which can occur under certain conditions on high-dpi devices, for instance] by using values with higher precision for these comparisons.Captions
functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
#FirstLastHandle 1 Mark
Otto
@mdo
2 Jacob
Thornton
@fat
3 Larry
the Bird
@twitter
List of users
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Responsive tables
.table
with .table-responsive
. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}
.overflow-y: hidden
, which clips off any content
that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.Always responsive
.table-responsive
for horizontally scrolling tables.#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading 1 Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2 Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3 Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
...
Breakpoint specific
.table-responsive{-sm|-md|-lg|-xl}
as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.#HeadingHeadingHeadingHeadingHeading 1 Cell
Cell
Cell
Cell
Cell
2 Cell
Cell
Cell
Cell
Cell
3 Cell
Cell
Cell
Cell
Cell
#HeadingHeadingHeadingHeadingHeading 1 Cell
Cell
Cell
Cell
Cell
2 Cell
Cell
Cell
Cell
Cell
3 Cell
Cell
Cell
Cell
Cell
#HeadingHeadingHeadingHeadingHeading 1 Cell
Cell
Cell
Cell
Cell
2 Cell
Cell
Cell
Cell
Cell
3 Cell
Cell
Cell
Cell
Cell
#HeadingHeadingHeadingHeadingHeading 1 Cell
Cell
Cell
Cell
Cell
2 Cell
Cell
Cell
Cell
Cell
3 Cell
Cell
Cell
Cell
Cell
...
...
...
...
How do I change the background color of a table?
How do I change the background color in Bootstrap?
How do I change the background color of a table in CSS?
How do I change the background color of a row in a table?
bgcolor Attribute
The HTML bgcolor Attribute is used to specify the background color of a table row. It is not supported by HTML 5. Attribute Values: color_name: It sets the background color by using the color name.
Chủ Đề