<divclass="alert alert-primary"role="alert"><strong>Well done!</strong> You successfully read this important alert message.
</div>

<divclass="alert alert-secondary"role="alert"><strong>Well done!</strong> You successfully read this important alert message.
</div>

<divclass="alert alert-success"role="alert"><strong>Well done!</strong> You successfully read this important alert message.
</div>

<divclass="alert alert-info"role="alert"><strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>

<divclass="alert alert-warning"role="alert"><strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

<divclass="alert alert-danger"role="alert"><strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

<divclass="alert alert-light"role="alert"><strong>Well done!</strong> You successfully read this important alert message.
</div>

<divclass="alert alert-dark"role="alert"><strong>Well done!</strong> You successfully read this important alert message.
</div>

<divclass="alert alert-danger"role="alert"><strong>Oh snap!</strong><ahref="#!"class="alert-link">Change a few things up</a> and try submitting again.
</div>

<divclass="alert alert-warning alert-dismissible fade show"role="alert"><buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><spanaria-hidden="true">&times;</span></button><strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>

<divclass="alert alert-success"role="alert"><h4class="alert-heading">Well done!</h4> You successfully read this important alert message.
</div>

<h1>Example heading <spanclass="badge badge-secondary">New</span></h1><h2>Example heading <spanclass="badge badge-secondary">New</span></h2><h3>Example heading <spanclass="badge badge-secondary">New</span></h3><h4>Example heading <spanclass="badge badge-secondary">New</span></h4><h5>Example heading <spanclass="badge badge-secondary">New</span></h5><h6>Example heading <spanclass="badge badge-secondary">New</span></h6>

<spanclass="badge badge-pill badge-primary">Secondary</span>

<spanclass="badge badge-primary">Primary</span>

<spanclass="badge badge-secondary">Secondary</span>

<spanclass="badge badge-success">Success</span>

<spanclass="badge badge-info">Info</span>

<spanclass="badge badge-warning">Warning</span>

<spanclass="badge badge-danger">Danger</span>

<spanclass="badge badge-light">Light</span>

<spanclass="badge badge-dark">Dark</span>

<navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item active"aria-current="page">Home</li></ol></nav><navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Home</a></li><liclass="breadcrumb-item active"aria-current="page">Library</li></ol></nav><navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Home</a></li><liclass="breadcrumb-item"><ahref="#">Library</a></li><liclass="breadcrumb-item active"aria-current="page">Data</li></ol></nav>

<buttontype="button"class="btn btn-primary">Primary</button>

<buttontype="button"class="btn btn-secondary">Secondary</button>

<buttontype="button"class="btn btn-success">Success</button>

<buttontype="button"class="btn btn-info">Info</button>

<buttontype="button"class="btn btn-warning">Warning</button>

<buttontype="button"class="btn btn-danger">Danger</button>

<buttontype="button"class="btn btn-light">Light</button>

<buttontype="button"class="btn btn-dark">Dark</button>

<buttontype="button"class="btn btn-link">Link</button>

<buttontype="button"class="btn btn-outline-primary">Primary</button>

<buttontype="button"class="btn btn-outline-secondary">Secondary</button>

<buttontype="button"class="btn btn-outline-success">Success</button>

<buttontype="button"class="btn btn-outline-info">Info</button>

<buttontype="button"class="btn btn-outline-warning">Warning</button>

<buttontype="button"class="btn btn-outline-danger">Danger</button>

<buttontype="button"class="btn btn-outline-light">Light</button>

<buttontype="button"class="btn btn-outline-dark">Dark</button>

<divclass="btn-group"role="group"aria-label="Basic example"><buttontype="button"class="btn btn-secondary">Left</button><buttontype="button"class="btn btn-secondary">Middle</button><buttontype="button"class="btn btn-secondary">Right</button></div>

<divclass="btn-group btn-group-lg"role="group"aria-label="Basic example"><buttontype="button"class="btn btn-secondary">Left</button><buttontype="button"class="btn btn-secondary">Middle</button><buttontype="button"class="btn btn-secondary">Right</button></div>

<divclass="btn-group btn-group-sm"role="group"aria-label="Basic example"><buttontype="button"class="btn btn-secondary">Left</button><buttontype="button"class="btn btn-secondary">Middle</button><buttontype="button"class="btn btn-secondary">Right</button></div>

<divclass="btn-group-vertical"role="group"aria-label="Basic example"><buttontype="button"class="btn btn-secondary">Left</button><buttontype="button"class="btn btn-secondary">Middle</button><buttontype="button"class="btn btn-secondary">Right</button></div>

<divclass="btn-group"role="group"aria-label="Button group with nested dropdown"><buttontype="button"class="btn btn-secondary">1</button><buttontype="button"class="btn btn-secondary">2</button><divclass="btn-group"role="group"><buttonid="btnGroupDrop1"type="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropdown </button><divclass="dropdown-menu"aria-labelledby="btnGroupDrop1"><aclass="dropdown-item"href="#!">Dropdown link</a><aclass="dropdown-item"href="#!">Dropdown link</a></div></div></div>

<divclass="btn-toolbar"role="toolbar"aria-label="Toolbar with button groups"><divclass="btn-group"role="group"aria-label="First group"><buttontype="button"class="btn btn-secondary">1</button><buttontype="button"class="btn btn-secondary">2</button><buttontype="button"class="btn btn-secondary">3</button></div><divclass="btn-group"role="group"aria-label="Second group"><buttontype="button"class="btn btn-secondary">5</button><buttontype="button"class="btn btn-secondary">6</button></div><divclass="btn-group"role="group"aria-label="Third group"><buttontype="button"class="btn btn-secondary">8</button></div></div>

<buttontype="button"class="btn btn-primary btn-lg">Large button</button>

<buttontype="button"class="btn btn-primary btn-sm">Small button</button>

<buttontype="button"class="btn btn-primary btn-lg btn-block">Block level button</button>

<ahref="#!"class="btn btn-primary btn-lg active"role="button"aria-pressed="true">Primary link</a>

<buttontype="button"class="btn btn-lg btn-primary"disabled>Disabled button</button><ahref="#"class="btn btn-primary btn-lg disabled"role="button"aria-disabled="true">Disabled link button</a>

<divclass="btn-group btn-group-toggle"data-toggle="buttons"><labelclass="btn btn-secondary active"><inputtype="checkbox"checkedautocomplete="off"> Active </label><labelclass="btn btn-secondary"><inputtype="checkbox"autocomplete="off"> Check </label></div>

<divclass="btn-group btn-group-toggle"data-toggle="buttons"><labelclass="btn btn-secondary active"><inputtype="radio"name="options"id="option1"autocomplete="off"checked> Active </label><labelclass="btn btn-secondary"><inputtype="radio"name="options"id="option2"autocomplete="off"> Radio </label></div>

<divclass="card"><imgclass="card-img-top"src="/images/pathToYourImage.png"alt="Card image cap"><divclass="card-body"><h4class="card-title">Card title</h4><pclass="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p><ahref="#!"class="btn btn-primary">Go somewhere</a></div></div>

<divclass="card"><divclass="card-body"> This is some text within a card block. </div></div>

<divclass="card"><divclass="card-body"><h4class="card-title">Card title</h4><h6class="card-subtitle mb-2 text-muted">Card subtitle</h6><pclass="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p><ahref="#!"class="card-link">Card link</a><ahref="#!"class="card-link">Another link</a></div></div>

<divclass="card"><divclass="card-body"><h4class="card-title">Card title</h4><h6class="card-subtitle mb-2 text-muted">Card subtitle</h6><pclass="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p><ahref="#!"class="card-link">Card link</a><ahref="#!"class="card-link">Another link</a></div></div>

<divclass="card"><divclass="card-body"><h4class="card-title">Card title</h4><h6class="card-subtitle mb-2 text-muted">Card subtitle</h6><pclass="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p><ahref="#!"class="card-link">Card link</a><ahref="#!"class="card-link">Another link</a></div></div>

<divclass="card"><divclass="card-body"><h4class="card-title">Card title</h4><h6class="card-subtitle mb-2 text-muted">Card subtitle</h6><pclass="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p><ahref="#!"class="card-link">Card link</a><ahref="#!"class="card-link">Another link</a></div></div>

<divclass="card"><imgclass="card-img-top"src="/images/pathToYourImage.png"alt="Card image cap"><divclass="card-body"> Some more card content </div></div>

<divclass="card"><divclass="card-body"><pclass="card-text">This image is in the middle</p></div><imgsrc="/images/pathToYourImage.png"alt="Card image"><divclass="card-body"><pclass="card-text">of a card.</p></div></div>

<divclass="card"><divclass="card-body"> Some more card content </div><imgclass="card-img-bottom"src="/images/pathToYourImage.png"alt="Card image cap"></div>

<divclass="card"><imgclass="card-img"src="/images/pathToYourImage.png"alt="Card image"><divclass="card-img-overlay"><pclass="card-text">I'm text that has a background image!</p></div></div>

<divclass="card"><ulclass="list-group list-group-flush"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Vestibulum at eros</li></ul></div>

<divclass="card"><divclass="card-header"> Featured </div><divclass="card-body"><h4class="card-title">Special title treatment</h4><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p></div></div>

<divclass="card"><h3class="card-header">Featured</h3><divclass="card-body"><h4class="card-title">Special title treatment</h4><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#!"class="btn btn-primary">Go somewhere</a></div></div>

<divclass="card"><divclass="card-body"><pclass="card-text">Some more card content</p></div><divclass="card-footer"> 2 days ago </div></div>

<divclass="card-group"><divclass="card"><divclass="card-body"><h4class="card-title">Card title</h4><pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div></div><divclass="card"><divclass="card-body"><h4class="card-title">Card title</h4><pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p></div></div><divclass="card"><divclass="card-body"><h4class="card-title">Card title</h4><pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p></div></div></div>

<divclass="card-deck"><divclass="card"><divclass="card-body"><h4class="card-title">Card title</h4><pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div></div><divclass="card"><divclass="card-body"><h4class="card-title">Card title</h4><pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p></div></div><divclass="card"><divclass="card-body"><h4class="card-title">Card title</h4><pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p></div></div></div>

<divclass="card-columns"><divclass="card"><divclass="card-body"><!-- Card content --></div></div><divclass="card p-3"><!-- Card content --></div><divclass="card"><divclass="card-body"><!-- Card content --></div></div><divclass="card bg-primary p-3 text-center"><!-- Card content --></div></div>

<!-- Tip: use bg-* and text-* utilities to style the card --><divclass="card text-white bg-primary mb-3 d-inline-block"style="max-width: 20rem;"><divclass="card-header">Header</div><divclass="card-body"><h4class="card-title">Primary card title</h4><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div><divclass="card text-white bg-dark mb-3 d-inline-block"style="max-width: 20rem;"><divclass="card-header">Header</div><divclass="card-body"><h4class="card-title">Primary card title</h4><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div>

<divid="carouselExampleIndicators"class="carousel slide"data-ride="carousel"><divclass="carousel-inner"role="listbox"><divclass="carousel-item active"><imgclass="d-block w-100"src="#"data-src="holder.js/900x400?theme=social"alt="First slide"></div><divclass="carousel-item"><imgclass="d-block w-100"src="#"data-src="holder.js/900x400?theme=industrial"alt="Second slide"></div></div><aclass="carousel-control-prev"href="#carouselExampleIndicators"role="button"data-slide="prev"><spanclass="carousel-control-prev-icon"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="carousel-control-next"href="#carouselExampleIndicators"role="button"data-slide="next"><spanclass="carousel-control-next-icon"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div>

<divid="carouselFadeExampleIndicators"class="carousel slide carousel-fade"data-ride="carousel"><divclass="carousel-inner"role="listbox"><divclass="carousel-item active"><imgclass="d-block w-100"src="#"data-src="holder.js/900x400?theme=social"alt="First slide"></div><divclass="carousel-item"><imgclass="d-block w-100"src="#"data-src="holder.js/900x400?theme=industrial"alt="Second slide"></div></div><aclass="carousel-control-prev"href="#carouselFadeExampleIndicators"role="button"data-slide="prev"><spanclass="carousel-control-prev-icon"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="carousel-control-next"href="#carouselFadeExampleIndicators"role="button"data-slide="next"><spanclass="carousel-control-next-icon"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div>

<divid="carouselExampleIndicators"class="carousel slide"data-ride="carousel"><olclass="carousel-indicators"><lidata-target="#carouselExampleIndicators"data-slide-to="0"class="active"></li><lidata-target="#carouselExampleIndicators"data-slide-to="1"></li></ol><divclass="carousel-inner"role="listbox"><divclass="carousel-item active"><imgclass="d-block w-100"src="#"data-src="holder.js/900x400?theme=social"alt="First slide"></div><divclass="carousel-item"><imgclass="d-block w-100"src="#"data-src="holder.js/900x400?theme=industrial"alt="Second slide"></div></div><aclass="carousel-control-prev"href="#carouselExampleIndicators"role="button"data-slide="prev"><spanclass="carousel-control-prev-icon"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="carousel-control-next"href="#carouselExampleIndicators"role="button"data-slide="next"><spanclass="carousel-control-next-icon"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div>

<divclass="bd-example"><divid="carouselExampleCaptions"class="carousel slide"data-ride="carousel"><olclass="carousel-indicators"><lidata-target="#carouselExampleCaptions"data-slide-to="0"class="active"></li><lidata-target="#carouselExampleCaptions"data-slide-to="1"></li></ol><divclass="carousel-inner"role="listbox"><divclass="carousel-item active"><imgclass="d-block w-100"data-src="holder.js/900x300?auto=yes&bg=777&fg=555&text=First slide"alt="First slide"><divclass="carousel-caption d-none d-md-block"><h3>First slide label</h3><p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p></div></div><divclass="carousel-item"><imgclass="d-block w-100"data-src="holder.js/900x300?auto=yes&bg=666&fg=444&text=Second slide"alt="Second slide"><divclass="carousel-caption d-none d-md-block"><h3>Second slide label</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div><aclass="carousel-control-prev"href="#carouselExampleCaptions"role="button"data-slide="prev"><spanclass="carousel-control-prev-icon"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="carousel-control-next"href="#carouselExampleCaptions"role="button"data-slide="next"><spanclass="carousel-control-next-icon"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div></div>

<p><aclass="btn btn-primary"data-toggle="collapse"href="#collapseExample"aria-expanded="false"aria-controls="collapseExample"> Link with href </a><buttonclass="btn btn-primary"type="button"data-toggle="collapse"data-target="#collapseExample"aria-expanded="false"aria-controls="collapseExample"> Button with data-target </button></p><divclass="collapse"id="collapseExample"><divclass="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div></div>

<divid="accordion"role="tablist"><divclass="card"><divclass="card-header"role="tab"id="headingOne"><h5class="mb-0"><adata-toggle="collapse"href="#collapseOne"aria-expanded="true"aria-controls="collapseOne"> Collapsible Group Item #1 </a></h5></div><divid="collapseOne"class="collapse show"role="tabpanel"aria-labelledby="headingOne"><divclass="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div></div></div><divclass="card"><divclass="card-header"role="tab"id="headingTwo"><h5class="mb-0"><aclass="collapsed"data-toggle="collapse"href="#collapseTwo"aria-expanded="false"aria-controls="collapseTwo"> Collapsible Group Item #2 </a></h5></div><divid="collapseTwo"class="collapse"role="tabpanel"aria-labelledby="headingTwo"><divclass="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div></div></div></div>

<divclass="dropdown"><buttonclass="btn btn-secondary dropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropdown </button><divclass="dropdown-menu"aria-labelledby="dropdownMenu1"><aclass="dropdown-item"href="#!">Action</a><aclass="dropdown-item"href="#!">Another action</a></div></div>

<divclass="btn-group"><buttontype="button"class="btn btn-secondary">Dropdown</button><buttontype="button"class="btn btn-secondary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">Toggle Dropdown</span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#!">Action</a><aclass="dropdown-item"href="#!">Another action</a></div></div>

<br><br><br><br><divclass="btn-group dropup"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropup </button><divclass="dropdown-menu"><aclass="dropdown-item"href="#!">Action</a><aclass="dropdown-item"href="#!">Something else here</a></div></div>

<br><br><br><br><divclass="btn-group dropup"><buttontype="button"class="btn btn-secondary"> Split dropup </button><buttontype="button"class="btn btn-secondary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">Toggle Dropdown</span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a></div></div>

<divclass="btn-group dropright"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropright </button><divclass="dropdown-menu"x-placement="right-start"style="position: absolute; transform: translate3d(111px, 0px, 0px); top: 0px; left: 0px; will-change: transform;"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a></div></div>

<divclass="btn-group dropleft"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropright </button><divclass="dropdown-menu"x-placement="right-start"style="position: absolute; transform: translate3d(111px, 0px, 0px); top: 0px; left: 0px; will-change: transform;"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a></div></div>

<divclass="dropdown open"><buttonclass="btn btn-secondary dropdown-toggle"type="button"id="dropdownMenu3"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropdown </button><divclass="dropdown-menu"><h6class="dropdown-header">Dropdown header</h6><aclass="dropdown-item"href="#!">Action</a><aclass="dropdown-item"href="#!">Another action</a></div></div>

<divclass="dropdown open"><buttonclass="btn btn-secondary dropdown-toggle"type="button"id="dropdownMenu4"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropdown </button><divclass="dropdown-menu"><spanclass="dropdown-item-text">Dropdown item text</span><aclass="dropdown-item"href="#!">Action</a><aclass="dropdown-item"href="#!">Another action</a></div></div>

<divclass="dropdown open"><buttonclass="btn btn-secondary dropdown-toggle"type="button"id="dropdownMenu5"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropdown </button><divclass="dropdown-menu"><aclass="dropdown-item"href="#!">Separated link</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#!">Action</a><aclass="dropdown-item"href="#!">Another action</a></div></div>

<divclass="dropdown open"><buttonclass="btn btn-secondary dropdown-toggle"type="button"id="dropdownMenu5"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropdown </button><divclass="dropdown-menu"><aclass="dropdown-item"href="#!">Action</a><aclass="dropdown-item disabled"href="#!">Disabled action</a></div></div>

<divclass="btn-group"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> This dropdown's menu is right-aligned </button><divclass="dropdown-menu dropdown-menu-right"><buttonclass="dropdown-item"type="button">Action</button><buttonclass="dropdown-item"type="button">Another action</button><buttonclass="dropdown-item"type="button">Something else here</button></div></div>

<form><divclass="form-group"><labelfor="formGroupExampleInput">Example label</label><inputtype="text"class="form-control"id="formGroupExampleInput"placeholder="Example input"></div><divclass="form-group"><labelfor="formGroupExampleInput2">Another label</label><inputtype="text"class="form-control"id="formGroupExampleInput2"placeholder="Another input"></div></form>

<formclass="form-inline"><labelclass="sr-only"for="inlineFormInputName2">Name</label><inputtype="text"class="form-control mb-2 mr-sm-2"id="inlineFormInputName2"placeholder="Jane Doe"><labelclass="sr-only"for="inlineFormInputGroupUsername2">Username</label><divclass="input-group mb-2 mr-sm-2"><divclass="input-group-prepend"><divclass="input-group-text">@</div></div><inputtype="text"class="form-control"id="inlineFormInputGroupUsername2"placeholder="Username"></div><divclass="form-check mb-2 mr-sm-2"><inputclass="form-check-input"type="checkbox"id="inlineFormCheck"><labelclass="form-check-label"for="inlineFormCheck"> Remember me </label></div><buttontype="submit"class="btn btn-primary mb-2">Submit</button></form>

<form><divclass="form-group row"><labelfor="inputEmail3"class="col-sm-2 col-form-label">Email</label><divclass="col-sm-10"><inputtype="email"class="form-control"id="inputEmail3"placeholder="Email"></div></div><divclass="form-group row"><divclass="col-sm-10 offset-sm-2"><buttontype="submit"class="btn btn-primary">Sign in</button></div></div></form>

<inputclass="form-control"type="text"placeholder="Default input">

<inputclass="form-control form-control-lg"type="text"placeholder=".form-control-lg">

<inputclass="form-control form-control-sm"type="text"placeholder=".form-control-sm">

<inputtype="file"class="form-control-file"id="exampleFormControlFile1">

<inputtype="text"readonlyclass="form-control-plaintext"id="staticEmail"value="email@example.com">

<inputtype="range"class="form-control-range">

<divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="defaultCheck1"><labelclass="form-check-label"for="defaultCheck1"> Default checkbox </label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios1"value="option1"checked><labelclass="form-check-label"for="exampleRadios1"> Default radio </label></div>

<divclass="form-check form-check-inline"><inputclass="form-check-input"type="checkbox"id="inlineCheckbox1"value="option1"><labelclass="form-check-label"for="inlineCheckbox1">1</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="checkbox"id="inlineCheckbox2"value="option2"><labelclass="form-check-label"for="inlineCheckbox2">2</label></div>

<form><fieldsetdisabled><divclass="form-group"><labelfor="disabledTextInput">Disabled input</label><inputtype="text"id="disabledTextInput"class="form-control"placeholder="Disabled input"></div><divclass="form-group"><labelfor="disabledSelect">Disabled select menu</label><selectid="disabledSelect"class="form-control"><option>Disabled select</option></select></div><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="disabledFieldsetCheck"disabled><labelclass="form-check-label"for="disabledFieldsetCheck"> Can't check this </label></div><buttontype="submit"class="btn btn-primary">Submit</button></fieldset></form>

<inputclass="form-control"type="text"placeholder="Readonly input hereРђд"readonly>

<divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text">Left addon</span></div><inputtype="text"class="form-control"><divclass="input-group-append"><spanclass="input-group-text">Right addon</span></div></div>

<divclass="input-group"><divclass="input-group-prepend"><buttonclass="btn btn-success"type="button">Love it</button></div><inputtype="text"class="form-control"placeholder=""aria-label=""aria-describedby="basic-addon1"></div>

<divclass="input-group"><inputtype="text"class="form-control"placeholder=""aria-label=""aria-describedby="basic-addon1"><divclass="input-group-append"><buttonclass="btn btn-success"type="button">Love it</button></div></div>

<divclass="input-group input-group-sm"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroup-sizing-sm">Small</span></div><inputtype="text"class="form-control"aria-label="Small"aria-describedby="inputGroup-sizing-sm"></div>

<divclass="input-group input-group-lg"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroup-sizing-lg">Large</span></div><inputtype="text"class="form-control"aria-label="Large"aria-describedby="inputGroup-sizing-sm"></div>

<divclass="input-group"><divclass="input-group-prepend"><divclass="input-group-text"><inputtype="checkbox"aria-label="Checkbox for following text input"></div></div><inputtype="text"class="form-control"aria-label="Text input with checkbox"></div>

<divclass="input-group"><divclass="input-group-prepend"><divclass="input-group-text"><inputtype="radio"aria-label="Radio button for following text input"></div></div><inputtype="text"class="form-control"aria-label="Text input with radio button"></div>

<divclass="input-group"><divclass="input-group-prepend"><buttonclass="btn btn-primary dropdown-toggle"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Dropdown</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a></div></div><inputtype="text"class="form-control"aria-label="Text input with dropdown button"></div>

<divclass="input-group mb-3"><divclass="input-group-prepend"><buttontype="button"class="btn btn-primary">Action</button><buttontype="button"class="btn btn-primary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">Toggle Dropdown</span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a></div></div><inputtype="text"class="form-control"aria-label="Text input with segmented dropdown button"></div>

<divclass="custom-control custom-checkbox"><inputtype="checkbox"class="custom-control-input"id="customCheck1"><labelclass="custom-control-label"for="customCheck1">Check this custom checkbox</label></div>

<divclass="custom-control custom-radio"><inputtype="radio"id="customRadio1"name="customRadio"class="custom-control-input"><labelclass="custom-control-label"for="customRadio1">Toggle this custom radio</label></div><divclass="custom-control custom-radio"><inputtype="radio"id="customRadio2"name="customRadio"class="custom-control-input"><labelclass="custom-control-label"for="customRadio2">Or toggle this other custom radio</label></div>