Bootstrap Basics #2

 

Text Colors

Bootstrap 4 has some contextual classes that can be used to provide "meaning through colors".

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

Dark grey text.

Body text.


Background Colors

The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.


Bootstrap 4 Images

Rounded Corners

The .rounded class adds rounded corners to an image

Example :

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Circle

The .rounded-circle class shapes the image to a circle

Example :

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

Thumbnail

The .img-thumbnail class shapes the image to a thumbnail (bordered)

Example: 

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

Centered Image

Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image

Example :

<img src="paris.jpg" class="mx-auto d-block">

Responsive Images

Images come in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen.

The .img-fluid class applies max-width: 100%; and height: auto; to the image

Example:

<img class="img-fluid" src="img_chania.jpg" alt="Chania">


Bootstrap 4 Buttons

Button Styles

Example:

<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>

The button classes can be used on <a>, <button>, or <input> elements.

Button Outline

Bootstrap 4 provides eight outline/bordered buttons.

Example:

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>

Button Sizes

Use the .btn-lg class for large buttons or .btn-sm class for small buttons.

Example:

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

Block Level Buttons

Add class .btn-block to create a block level button that spans the entire width of the parent element.

Example:

<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>

Active/Disabled Buttons

A button can be set to an active (appear pressed) or a disabled (unclickable) state

Example:

<a href="#" class="btn btn-primary disabled">Disabled Link</a>

Spinner Buttons

Example:

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Loading..
</button>

Bootstrap 4 Button Groups

Bootstrap 4 allows you to group a series of buttons together (on a single line) in a button group.

Example:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Instead of applying button sizes to every button in a group, use class .btn-group-lg for a large button group or the .btn-group-sm for a small button group.

Use the class .btn-group-vertical to create a vertical button group.

Bootstrap 4 Progress Bars

A progress bar can be used to show a user how far along he/she is in a process.

To create a default progress bar, add a .progress class to a container element and add the .progress-bar class to its child element. Use the CSS width property to set the width of the progress bar

Example:

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

Progress Bar Labels

Add text inside the progress bar to show the visible percentage.

Example:

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

Colored Progress Bars

Example:

<!-- Blue -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>

<!-- Green -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>

<!-- Turquoise -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>


Light grey text.

Comments

Post a Comment

Popular posts from this blog

CSS Advanced #2

  CSS  The object-fit Property: The CSS   object-fit   property is used to specify how an <img> or <video> should be resized to fit its container. Example :  img  {   width :  200px ;   height :  400px ;   object-fit :  cover ; } All Values of The CSS object-fit Property The  object-fit  property can have the following values: fill  - This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit contain  - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box cover  - The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit none  - The replaced content is not resized scale-down  - The content is sized as if none or contain were specified (would result in a smaller co...
Read more

Java Basics #4

  Java  Math The Java Math class has many methods that allows you to perform mathematical tasks on numbers. Math.max( x,y ) The  Math.max( x , y )  method can be used to find the highest value of  x  and  y. Example: Math.max(5, 10); Math.min( x,y ) The  Math.min( x , y )  method can be used to find the lowest value of  x  and  y. Example: Math.min(5, 10); Math.sqrt( x ) The  Math.sqrt( x )  method returns the square root of  x. Example: Math.sqrt(64); Math.abs( x ) The  Math.abs( x )  method returns the absolute (positive) value of  x. Example: Math.abs(-4.7); Random Numbers Math.random()  returns a random number between 0.0 (inclusive), and 1.0 (exclusive). Example: Math.random(); To get more control over the random number, e.g. you only want a random number between 0 and 100, you can use the following formula. Example: int randomNum = (int)(Math.random() * 101);  // 0 to 100 More Math ...
Read more

Java Basics #1

Simple Java program: public class Main {   public static void main(String[] args) {     System.out.println("Hello World");   } } Every line of code that runs in Java must be inside a  class . In our example, we named the class  Main . A class should always start with an uppercase first letter. The main Method The  main()  method is required and you will see it in every Java program. Any code inside the  main()  method will be executed. You don't have to understand the keywords before and after main. System.out.println() Inside the  main()  method, we can use the  println()  method to print a line of text to the screen. Java Comments Comments can be used to explain Java code, and to make it more readable. It can also be used to prevent execution when testing alternative code. Single-line comments start with two forward slashes ( // ). Java Variables Variables are containers for storing data values. In Java, there are d...
Read more