Bootstrap-based UI kit

Installation

Include it below the opening <head> tag

      

        
        https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
        https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js

        
        https://code.jquery.com/jquery-3.7.1.min.js

        
        https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css

        
        https://unpkg.com/bootstrap-table@1.22.2/dist/bootstrap-table.min.css
        https://unpkg.com/bootstrap-table@1.22.2/dist/bootstrap-table.min.js
        https://unpkg.com/bootstrap-table@1.22.2/dist/locale/bootstrap-table-ca-ES.min.js
        https://unpkg.com/bootstrap-table@1.22.2/dist/locale/bootstrap-table-es-ES.min.js"

        
        https://unpkg.com/bootstrap-table@1.22.2/dist/extensions/filter-control/bootstrap-table-filter-control.min.css
        https://unpkg.com/bootstrap-table@1.22.2/dist/extensions/filter-control/bootstrap-table-filter-control.min.js

        
        https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css
        https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js
        https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css

        
        https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js
        https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css

        
        https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.es.min.js
        
        https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.ca.min.js

        
        https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.css
        https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.js

        
        /assets/css/urv-overrides.css

        
        /assets/js/urv-helpers.js

        
        /js/main-[hash].js" type="module"
        
        /assets/css/main.css
        
      
    

Typography

h1 1st level 64/68

Lorem ipsum dolor sit amet

h1 2nd level 56/60

Lorem ipsum dolor sit amet

h2 48/56

Lorem ipsum dolor sit amet

h3 38/44

Lorem ipsum dolor sit amet

h4 28/36

Lorem ipsum dolor sit amet

h5 22/28
Lorem ipsum dolor sit amet
h6 16/22
Lorem ipsum dolor sit amet
PARAGRAPH 18/28

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur tellus vel nunc dapibus, sed fermentum lorem molestie. Duis tempor elementum tellus, in fermentum elit pretium non. Quisque laoreet eu odio nec vestibulum. Link example viverra in nisi sit amet vehicula.

Sed placerat purus non rutrum dignissim. In dapibus nulla pulvinar velit vulputate, vitae fermentum felis bibendum. Nam accumsan mollis nulla, et consequat nibh aliquam sit amet.

Aenean a posuere dolor, bibendum dictum quam. Donec sodales sed eros at rhoncus. Maecenas feugiat metus in nisl accumsan facilisis. Vivamus at quam tempus, venenatis sapien in, commodo purus. Aenean non luctus ex.

Unordered list
  • Nunc nisi justo, viverra a pretium in, volutpat at quam.
  • Vestibulum egestas felis nec nisl placerat, in aliquet risus auctor.
  • Quisque volutpat auctor tellus, ut posuere libero.
Onordered list
  1. Nunc nisi justo, viverra a pretium in, volutpat at quam.
  2. Vestibulum egestas felis nec nisl placerat, in aliquet risus auctor.
  3. Quisque volutpat auctor tellus, ut posuere libero.
The 'Roboto' font is imported from the Google repository in urv-overrides.css
                
                    https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&display=swap
                

Basic components

Inputs

                
                    
                
                    
                
                    
Please provide a valid city.
                
                    
Please provide a valid city.
                
                    
                
                    
                
                    
                    
                
                    
                
                    

Selection controls

Checkboxes, radios and switches

Checkboxes
                    

                        
Radios
                    
                        
                        
Radios
Switches
                    
                        
                        
Switches

Buttons

Light and dark background

Light background
                    
                        
                        
Dark background
                    
                        
                        

Button sizes

Small
Medium
Large
Extra Large
                    
                        
                        

                        

                        

                        
                        
                    
                

Button text icon

Icon left
Icon Right
                    
                        
                        

                        
                        
                    
                

Button icon

Small
Medium
Large
Extra large
                    
                        
                        

                        

                        

                        
                        
                    
                

Selects

Select
                    
                        
                        
                
                        
                        
                    
                
Select 2
                    
                        
                        
                        
                        
                        
                    
                

Datepicker

                    
                        
                        
                        

Progress

Progress
                    
                        
                        
Progress secondary | accent
                    
                        
                        

WYSIWYG

                    
                        
                        
                        
                        
                    
                

Second layer

Tooltips

Tooltip on top | Tooltip on right | Tooltip on bottom | Tooltip on left
                
                    
                    
                        Tooltip on top
                    
                    |
                    Tooltip on right
                    |
                    Tooltip on bottom
                    |
                    Tooltip on left
                    
                
            

Modals

                
                    
                    
                    
                    
                    
                    
                
            

User dropdown

Tabs and accordions

Tabs

Tipus beca

Lorem ipsum dolor sit amet, ulpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim.

Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia.

Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

                
                    
                    
Tipus beca

Lorem ipsum dolor sit amet, ulpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim.

Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia.

Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

Accordions

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.

Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia.

Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

Aliqua reprehenderit commodo ex non excepteur, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate.

Aliqua reprehenderit commodo ex non excepteur, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

                
                    
                    

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.

Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia.

Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

Aliqua reprehenderit commodo ex non excepteur, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate.

Aliqua reprehenderit commodo ex non excepteur, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.

Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia.

Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

Aliqua reprehenderit commodo ex non excepteur, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate.

Aliqua reprehenderit commodo ex non excepteur, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

                
                    
                    

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.

Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia.

Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

Aliqua reprehenderit commodo ex non excepteur, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate.

Aliqua reprehenderit commodo ex non excepteur, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

Tables

Filter table

Remove the table-test class (from the code view)

Codi Actiu Rol destinatari Tipus email Fase Estat Acciones
RE_COO_INI_PROC Si Coordinador/ Comissió Acadèmica DT informa CA/Coo proposta RE favorable Revisió externa RE autoritzada per la CA
RE_DT_OK Si Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi Comissió valora positivament RE i autorittza a iniciar fase Dipòsit Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_INI_PROC No Director/a Tesi, Estudiant, Tutor/a Tesi Estudiant informa DT/TT revisi proposta RE Revisió externa RE autoritzada per la CA
RE_DT_OK Si Coordinador/ Comissió Acadèmica DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_OK Si Director/a Tesi, Estudiant, Tutor/a Tesi Estudiant informa DT/TT revisi proposta RE Revisió externa RE autoritzada per la CA
RE_COO_INI_PROC No Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_INI_PROC No Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_INI_PROC No Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_INI_PROC No Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_INI_PROC No Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_INI_PROC No Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA
            
                
                
Codi Actiu Rol destinatari Tipus email Fase Estat Acciones
RE_COO_INI_PROC Si Coordinador/ Comissió Acadèmica DT informa CA/Coo proposta RE favorable Revisió externa RE autoritzada per la CA
RE_DT_OK Si Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi Comissió valora positivament RE i autorittza a iniciar fase Dipòsit Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_INI_PROC No Director/a Tesi, Estudiant, Tutor/a Tesi Estudiant informa DT/TT revisi proposta RE Revisió externa RE autoritzada per la CA
RE_DT_OK Si Coordinador/ Comissió Acadèmica DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_OK Si Director/a Tesi, Estudiant, Tutor/a Tesi Estudiant informa DT/TT revisi proposta RE Revisió externa RE autoritzada per la CA
RE_COO_INI_PROC No Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_INI_PROC No Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_INI_PROC No Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_INI_PROC No Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_INI_PROC No Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_INI_PROC No Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA
Simple table

Remove the table-test class (from the code view)

Codi Actiu Rol destinatari Tipus email Fase Estat
RE_COO_INI_PROC Si Coordinador/ Comissió Acadèmica DT informa CA/Coo proposta RE favorable Revisió externa RE autoritzada per la CA
RE_DT_OK Si Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi Comissió valora positivament RE i autorittza a iniciar fase Dipòsit Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_INI_PROC No Director/a Tesi, Estudiant, Tutor/a Tesi Estudiant informa DT/TT revisi proposta RE Revisió externa RE autoritzada per la CA
RE_DT_OK Si Coordinador/ Comissió Acadèmica DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA
          

            
Codi Actiu Rol destinatari Tipus email Fase Estat
RE_COO_INI_PROC Si Coordinador/ Comissió Acadèmica DT informa CA/Coo proposta RE favorable Revisió externa RE autoritzada per la CA
RE_DT_OK Si Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi Comissió valora positivament RE i autorittza a iniciar fase Dipòsit Revisió externa RE calorada positivament DT pendent autorització CA
RE_COO_INI_PROC No Director/a Tesi, Estudiant, Tutor/a Tesi Estudiant informa DT/TT revisi proposta RE Revisió externa RE autoritzada per la CA
RE_DT_OK Si Coordinador/ Comissió Acadèmica DT informa CA/Coo proposta RE favorable Revisió externa RE calorada positivament DT pendent autorització CA

Cards

Comandes confirmades

2.648

Total reserves d’equips

18.267

Lorem ipsum sit amet

4.671

                

                    
Comandes confirmades

2.648

Cards with buttons

Accions habituals

Noves comandes

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim.

                
                    
                    

Accions habituals

Noves comandes

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim.

Pressupostos pendents d’acceptació

Codi Actiu Rol destinatari Tipus email Fase
RE_COO_INI_PROC Si Coordinador/ Comissió Acadèmica DT informa CA/Coo proposta RE favorable Revisió externa
RE_DT_OK Si Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi Comissió valora positivament RE i autorittza a iniciar fase Dipòsit Revisió externa
RE_COO_INI_PROC No Director/a Tesi, Estudiant, Tutor/a Tesi Estudiant informa DT/TT revisi proposta RE Revisió externa
RE_DT_OK Si Coordinador/ Comissió Acadèmica DT informa CA/Coo proposta RE favorable Revisió externa
                
                    
                    
Codi Actiu Rol destinatari Tipus email Fase
RE_COO_INI_PROC Si Coordinador/ Comissió Acadèmica DT informa CA/Coo proposta RE favorable Revisió externa
RE_DT_OK Si Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi Comissió valora positivament RE i autorittza a iniciar fase Dipòsit Revisió externa
RE_COO_INI_PROC No Director/a Tesi, Estudiant, Tutor/a Tesi Estudiant informa DT/TT revisi proposta RE Revisió externa
RE_DT_OK Si Coordinador/ Comissió Acadèmica DT informa CA/Coo proposta RE favorable Revisió externa

Accordion and table

Tipus beca

Llistat

Codi Actiu Rol destinatari Tipus email Fase
RE_COO_INI_PROC Si Coordinador/ Comissió Acadèmica DT informa CA/Coo proposta RE favorable Revisió externa
RE_DT_OK Si Comissió Acadèmica, Director/a Tesi, Estudiant, Tutor/a Tesi Comissió valora positivament RE i autorittza a iniciar fase Dipòsit Revisió externa
RE_COO_INI_PROC No Director/a Tesi, Estudiant, Tutor/a Tesi Estudiant informa DT/TT revisi proposta RE Revisió externa
RE_DT_OK Si Coordinador/ Comissió Acadèmica DT informa CA/Coo proposta RE favorable Revisió externa