Alt tekst for google

Image with class 'text-center header-visual'

Solucious Styleguide

Solucious theme build upon Bootstrap 5, v5.3.

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only. Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto, and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools.

https://getbootstrap.com/docs/5.3/getting-started/introduction/ 

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Paragraph text ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Heading 1 class fw-bold text-primary

Heading 2 class text-secondary fw-light

Heading 3 class text-center

Heading 4

Heading 5

Heading 3 class fs-1

  • List element with class 'custom_list' other colors:
  • custom_list li-primary
  • custom_list li-secondary
  • custom_list li-success
  • custom_list li-info
  • custom_list li-warning
  • custom_list li-danger
  • custom_list li-light
  • custom_list li-dark
  • custom_list li-action
  • custom_list li-discount
  • custom_list li-rating
  • custom_list li-neutral
  • custom_list li-supplier
  • custom_list li-new
  • custom_list li-commerce

Buttons

Bootstrap has a base .btn class that sets up basic styles such as padding and content alignment. By default, .btn controls have a transparent border and background color, and lack any explicit focus and hover styles.

btn

btn btn-primary

btn btn-secondary

btn light

btn btn-dark

btn with icon  

Button tags

Link

<a class="btn btn-light" href="#" role="button">Link
<button class="btn btn-light" type="submit">Button
<input class="btn btn-light" type="button" value="Input">
<input class="btn btn-light" type="submit" value="Submit">

Margin & Padding

Margin

m = margin (all sides)
t = top
e = right (end)
b = bottom
s = left (start)
x = horizontal (left and right)
y = vertical (top and bottom)

Numbers range from 1-5. E.g. m-1, m-2, m-3, m-4, m-5

Classes to remove margin:

  • m-0
  • mt-0
  • me-0
  • mb-0
  • ms-0
margin top (mt-5)
margin right (me-5)
margin bottom (mb-5)
margin left (ms-5)
margin vertical (my-5)
margin horizontal (mx-5)

Padding

p = padding (all sides)
t = top
e = right (end)
b = bottom
s = left (start)
x = horizontal (left and right)
y = vertical (top and bottom)

Numbers range from 1-5. E.g. p-1, p-2, p-3, p-4, p-5

Classes to remove padding:

  • p-0
  • pt-0
  • pe-0
  • pb-0
  • ps-0
padding top (pt-5)
padding right (pe-5)
padding bottom (pb-5)
padding left (ps-5)
padding vertical (py-5)
padding horizontal (px-5)

Color classes

'text-' stands for color, to use on text elements

'bg-' stands for background-color, useful on articles / full width rows

•

text-primary
bg-primary
#009647

•

text-secondary
bg-secondary
#524596

•

text-success
bg-success
#009647

•

text-warning
bg-warning
#DC8633

•

text-danger
bg-danger
#DD1B13

•

text-info
bg-info
#67A9F6

•

text-action
bg-action
#009647

•

text-neutral
bg-neutral
#999999

•

text-discount
bg-discount
#DD1B13

•

text-alert
bg-alert
#DD1B13

•

text-supplier
bg-supplier
#89BE2B

•

text-new
bg-new
#f9e31f

•

text-rating
bg-rating
#89BE2B

•

text-commerce
bg-commerce
#524596

Discounts:

•

text-discount-50
bg-discount-50
#FDF4F3

•

text-discount-100
bg-discount-100
#FCE8E7

•

text-discount-200
bg-discount-200
#F8D1D0

•

text-discount-300
bg-discount-300
#EE8D89

•

text-discount-400
bg-discount-400
#DE4E5F

•

text-discount-500
bg-discount-500
#DD1B13

•

text-discount-600
bg-discount-600
#C71811

•

text-discount-700
bg-discount-700
#A6140E

•

text-discount-800
bg-discount-800
#6F0E0A

•

text-discount-900
bg-discount-900
#4D0907

Alerts:

•

text-alert-50
bg-alert-50
#FDF4F3

•

text-alert-100
bg-alert-100
#FCE8E7

•

text-alert-200
bg-alert-200
#F8D1D0

•

text-alert-300
bg-alert-300
#EE8D89

•

text-alert-400
bg-alert-400
#DE4E5F

•

text-alert-500
bg-alert-500
#DD1B13

•

text-alert-600
bg-alert-600
#C71811

•

text-alert-700
bg-alert-700
#A6140E

•

text-alert-800
bg-alert-800
#6F0E0A

•

text-alert-900
bg-alert-900
#4D0907

Action:

•

text-action-50
bg-action-50
#F2FAF6

•

text-action-100
bg-action-100
#E5F4ED

•

text-action-200
bg-action-200
#CCEADA

•

text-action-300
bg-action-300
#80CAA3

•

text-action-400
bg-action-400
#4CB57E

•

text-action-500
bg-action-500
#009647

•

text-action-600
bg-action-600
#008740

•

text-action-700
bg-action-700
#007035

•

text-action-800
bg-action-800
#004B24

•

text-action-900
bg-action-900
#003519

Neutral:

•

text-neutral-50
bg-neutral-50
#FFFFFF

•

text-neutral-100
bg-neutral-100
#F2F2F2

•

text-neutral-200
bg-neutral-200
#E6E6E6

•

text-neutral-300
bg-neutral-300
#CCCCCC

•

text-neutral-400
bg-neutral-400
#B3B3B3

•

text-neutral-500
bg-neutral-500
#999999

•

text-neutral-600
bg-neutral-600
#808080

•

text-neutral-700
bg-neutral-700
#4D4D4D

•

text-neutral-800
bg-neutral-800
#333333

•

text-neutral-900
bg-neutral-900
#1D1D1B

Warning:

•

text-warning-50
bg-warning-50
#FDF9F5

•

text-warning-100
bg-warning-100
#FBF3EB

•

text-warning-200
bg-warning-200
#F8E7D6

•

text-warning-300
bg-warning-300
#EEC299

•

text-warning-400
bg-warning-400
#E7AA70

•

text-warning-500
bg-warning-500
#DC8633

•

text-warning-600
bg-warning-600
#C6792E

•

text-warning-700
bg-warning-700
#A56426

•

text-warning-800
bg-warning-800
#6E431A

•

text-warning-900
bg-warning-900
#4D2F12

Supplier:

•

text-supplier-50
bg-supplier-50
#F9FCF4

•

text-supplier-100
bg-supplier-100
#F3F9EA

•

text-supplier-200
bg-supplier-200
#E7F2D5

•

text-supplier-300
bg-supplier-300
#C4DF95

•

text-supplier-400
bg-supplier-400
#ACD26B

•

text-supplier-500
bg-supplier-500
#89BE2B

•

text-supplier-600
bg-supplier-600
#7BAB27

•

text-supplier-700
bg-supplier-700
#678E20

•

text-supplier-800
bg-supplier-800
#445F15

•

text-supplier-900
bg-supplier-900
#30420F

Rating:

•

text-rating-50
bg-rating-50
#F9FCF4

•

text-rating-100
bg-rating-100
#F3F9EA

•

text-rating-200
bg-rating-200
#E7F2D5

•

text-rating-300
bg-rating-300
#C4DF95

•

text-rating-400
bg-rating-400
#ACD26B

•

text-rating-500
bg-rating-500
#89BE2B

•

text-rating-600
bg-rating-600
#7BAB27

•

text-rating-700
bg-rating-700
#678E20

•

text-rating-800
bg-rating-800
#445F15

•

text-rating-900
bg-rating-900
#30420F

Info:

•

text-info-50
bg-info-50
#F7FBFF

•

text-info-100
bg-info-100
#F0F6FE

•

text-info-200
bg-info-200
#E1EEFD

•

text-info-300
bg-info-300
#B3D4FA

•

text-info-400
bg-info-400
#95C3F9

•

text-info-500
bg-info-500
#67A9F6

•

text-info-600
bg-info-600
#5D98DD

•

text-info-700
bg-info-700
#4D7FB8

•

text-info-800
bg-info-800
#34557B

•

text-info-900
bg-info-900
#243B56

Commerce:

•

text-commerce-50
bg-commerce-50
#F6F6FA

•

text-commerce-100
bg-commerce-100
#EEECF5

•

text-commerce-200
bg-commerce-200
#DCDAEA

•

text-commerce-300
bg-commerce-300
#A8A2CA

•

text-commerce-400
bg-commerce-400
#867DB6

•

text-commerce-500
bg-commerce-500
#524596

•

text-commerce-600
bg-commerce-600
#4A3E87

•

text-commerce-700
bg-commerce-700
#3E3471

•

text-commerce-800
bg-commerce-800
#29224B

•

text-commerce-900
bg-commerce-900
#1D1835

Hoe bestel je?

 

Vul je winkelmandje

Log in

 

Kies je bezorgmoment

 

Plaats je bestelling

 

Ontvang je bestelling

 

Log in



Dit is een content in een artikel met de break-container optie aan. Break container breekt buiten de standaard bootstrap container en wordt de volledige breedte van het scherm.

In dit content staan ook een paar <p><br /></p> voor de 'wit' ruimte





  Door de class 'break-container' aan een content toe te voegen breekt deze ook buiten de container waardoor deze ook de volledige breedte wordt.



Article

Col md 4

The article has a Class 'row'. This content element has a class 'col-12 col-md-4 py-3'. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. https://getbootstrap.com/docs/3.3/css/#grid-example-basic

Col md 4

The article has a Class 'row'. This content element has a class 'col-12 col-md-4 py-3'. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. https://getbootstrap.com/docs/3.3/css/#grid-example-basic

Col md 4

The article has a Class 'row'. This content element has a class 'col-12 col-md-4 py-3'. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. https://getbootstrap.com/docs/3.3/css/#grid-example-basic

Article with break-container option

Image 'ce_image_fullsize' will set the image to 100% width

Full width image section, no gutters between cols

Alt tekst for google
Alt tekst for google
Alt tekst for google
Alt tekst for google

Font awesome

Solucious theme build with Font Awesome 6 Free, v6.6.0, Font Awesome
Icons can be inserted using the <em></em> tags,warning; there needs to be be a space (&nbsp;) between the tags or else they wil be deleted.
For example   is <em class="fa-solid fa-birthday-cake">&nbsp;</em>

Below you can find a couple examples, visit the website for all icons.




Image carousel col-md-9

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. 

Image carousel col-md-6

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. 

Alerts

- Je kan alerts maken door de classes .alert en .sol-alert mee te geven aan een div.
- Door het gebruik van .alert-primary, .alert-info, .alert-warning, .alert-danger kun je een kleur en icoon kiezen.
- Als je de class .alert-no-icon toevoegt aan de div wordt het icoontje weggehaald.
- Onderaan de div moet een button met class .btn-close en attribuut data-bs-dismiss="alert" geplaatst worden voor het kruisje, laat deze weg als de alert niet uitgezet mag worden.
- Er wordt niet onderwater opgeslagen of een alert is gesloten, deze wordt dus opnieuw getoond na het laden van de pagina.

.alert-primary

> Leuke informatie of iets dat gelukt is
Dolor reprehenderit velit magna adipisicing amet tempor ex. Incididunt labore consectetur occaecat veniam commodo cupidatat ad est aliqua mollit enim fugiat incididunt ut. Velit minim irure sunt fugiat irure sint deserunt sint mollit. Sunt nisi mollit aute id nisi qui.

.alert-info

> Informatie, geen (dringende) actie nodig. Of enkel optioneel.
Dolor reprehenderit velit magna adipisicing amet tempor ex. Incididunt labore consectetur occaecat veniam commodo cupidatat ad est aliqua mollit enim fugiat incididunt ut. Velit minim irure sunt fugiat irure sint deserunt sint mollit. Sunt nisi mollit aute id nisi qui.

.alert-warning

> Waarschuwing maar niet blokkerend: activeren
Dolor reprehenderit velit magna adipisicing amet tempor ex. Incididunt labore consectetur occaecat veniam commodo cupidatat ad est aliqua mollit enim fugiat incididunt ut. Velit minim irure sunt fugiat irure sint deserunt sint mollit. Sunt nisi mollit aute id nisi qui.

.alert-danger

> Verbod, error, blokkerend: dringend activeren
Dolor reprehenderit velit magna adipisicing amet tempor ex. Incididunt labore consectetur occaecat veniam commodo cupidatat ad est aliqua mollit enim fugiat incididunt ut. Velit minim irure sunt fugiat irure sint deserunt sint mollit. Sunt nisi mollit aute id nisi qui.

Normale buttons

Normale buttons disabled

Kleine buttons

Kleine buttons disabled

Grote buttons

Grote buttons disabled

Outline buttons

Outline buttons disabled

Outline kleine buttons

Outline kleine buttons disabled

Outline grote buttons

Outline grote buttons disabled