# Customized Bootstrap Classes for Chinacapital.com Brand

This repository provides a set of customized Bootstrap classes that reflect the color scheme and design aesthetics of Chinacapital.com. These classes allow users to apply the Chinacapital.com style by simply using the standard Bootstrap classes.

## Getting Started

To utilize these custom classes, include the Bootstrap 5.3.2 CSS file in your HTML:

```
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
```
## Font Family

In general Chinacapital.com uses Fira Sans font family and it's google link is already added in header. All the content available in body tag will automatically use Fira Sans font family by default.

# Customized CSS Classes

Here are some examples of custom css classes

##  Buttons

The .btn-danger and .btn-dark CSS classes has been customized to reflect the danger and dark button style of Chinacapital.com:

```
<button class="btn btn-danger">Dark Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
```

## Typograpghy

To write any kind of text, simple use HTML5 standard tags for headings and paragraphs. These tags are already adopted with Chinacapital.com font guidelines:

```
<h1>This is a heading H1</h1>
<h2>This is a heading H2</h2>
<h3>This is a heading H3</h3>
<h4>This is a heading H4</h4>
<h5>This is a heading H5</h5>
<h6>This is a heading H6</h6>
<p>This paragrapgh is going to be amazing, with this new brand format</p>
```
### custom titles

To use custom titles use .title, .sub-title and .underlined-title classes

```
<h1 class="title">Main title</h1>
<h1 class="underlined-title">Underlined title</h1>
<h3 class="sub-title">This is sub title</h3>
```

To add Chinacapital.com brand color in headings or paraghraphs, just add .text-primary class:

```
<p class="text-danger">Text in Chinacapital.com color</p>
```

**Pre tag**

```
<pre>
Jonathan Morton, Esq.
Morton & Associates LLP
246 West Broadway
New York NY 10013
United States
</pre>
```

## Links

```
<a href="#">This is a link, test it.</a>
```
## List Items

```
<ul>
  <li>An active item</li>
  <li>A second item</li>
  <li>A third item</li>
  <li>A fourth item</li>
  <li>And a fifth one</li>
</ul>
```

## Forms

To add forms in webpage, simply use bootstrap forms:

```
<div class="form-group">
  <label for="exampleInputPassword1">Password</label>
  <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
```