Boostrap 1 Modal, Pagination, form layout and input component
Even if we include only some modules of bootstrap we use the entire package:
//On the <head> or inside the body
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
//In React.js we:
npm i bootstrap
import 'bootstrap/dist/css/bootstrap.css';
Boostrap Spacing & Display
We can use classes to add margin and padding:
//so, we can use m_- or p_- for Margin or Padding, from 0-5 and even negative numbers
<div class="ms-3"></div>
//we can use x/y for left/right or top/bottom
<p class="my-2"></p>
//or if we want left/rigth/top bottom, s(tart),e(nd), t(op), b(ottom)
<h3 class="pe-4"></h3>
And for display and media-query breakpoints:
//we display with d-
d-flex /d-block /d-inline-block
//and media-query START from their breakpoints
d-block d-sm-none //D(isplay)-block but AFTER -sm-D(isplay)-none, only visible in small
d-none d-sm-block //D(isplay) AFTER small-block but BEFORE is -none
d-none d-sm-block d-md-none //visible only in md (none in default and AFTER md)
PureCSS and Modal
For modals we have buttons opening extra windows with content, through data-bs-toggle="modal" and data-bs-target:
//the button will have the -toggle for the modal and the target for the modal content
<button class="pure-button" data-bs-toggle="modal" data-bs-target="#uno">Stati</button>
//parent tag has a modal class to hide the modal before the click/fade for animation
//and the ID for the target button
//the structure is modal-dialog>
modal-content>
modal-header...
<div class="modal fade" id="uno">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
//to close we use the btn-close bootstrap and close our modal -dismiss="modal"
In the modal content, we can add Extra PureCSS pure-g(rid), images, forms, and bootstrap effects:
Pagination and bootpag
On pagination we create a list of links:
//pagination-sm/md/lg sets the size of the list
<ul class="pagination pagination-lg justify-content-center my-5">
<li class=""><a class="page-link" href="#">
<span> «</span></a>
</li>
<li class=""><a class="page-link" href="#">1</a></li>
<li class=""><a class="page-link" href="#">2</a></li>
<li class=""><a class="page-link" href="#">3</a></li>
<li class="page-item active"><a class="page-link" href="#">
<span>»</span>
</a></li>
</ul>
To have a dynamic pagination bar we can use a Jquery Plugin Bootpag:
//to start using it we need Jquery and Bootpag in the <head> (and of course bootstrap)
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
With the plug-in we only need an id for the pagination and content:
<div style="text-align: center">
<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>
</div>
Everything is done on javascript :
//we load the parameters of the paginator with bootpag
$('#show_paginator').bootpag({
total: 24, //total pages/links
page: 1, //starting page
maxVisible: 6, //max number of visible
next: ">", //we can change the next button default arrow
//href: "https://www.amazon.it/" //we can also give each page an automatic link
}).on('page', function(event, num){
$("#dynamic_content").html("Page " + num); //onclick of the page link we change the html
});
We can change the pagination property by using $(this).bootpag({ }).
<div class="text-center">
<div class="demo1" >Pagination goes here</div>
<div class="content"></div>
</div>
$('.demo1').bootpag({
total: 5
}).on("page", function(event, num){
$(".content").html("Page " + num);
//we can modify the bootpag after the click with new properties
$(this).bootpag({
total: 10, //we add more pag elements
maxVisible: 6,
next: 'next',
href: "#pro-page-{{number}}", //we can give each button clicked an href
prev: null //we can delete the prev button
});
if(num==5){
$(".content").html("complimenti YOU GOT GNOMED")
}
//and we can add conditions on specific clicked buttons
});
Bootstrap collapse buttons and content
The data-bs-toggle="collapse" uses href/data-bs-target to animate the height/width of the collapse element.
When using a non-button we use href="#" to target the collapse Id content,
//The trigger container and the collapse can be located anywhere
<div className="row justify-content-center me-0">
<div className="col-5">
<div className="d-flex justify-content-between align-items-center p-2"
href="#apri" role='button' data-bs-toggle="collapse">
<p>Click to collapse</p>
<i className="fa-solid fa-angle-down"></i>
</div>
<div className="collapse" id="apri">
<div className='card card-body'>
...Lorem
</div>
</div>
</div>
</div>

To data-bs-target/href multiple collapse we use classes.
Bootstrap Forms
We design Boostrap forms using form-label/form-input pairs, linked by htmlfor/ID attributes.
Each input occupies 100% of the width unless a row>col is set.
//We can add read-only and form-control-plaintext to an input
<div className="row justify-content-center">
<div className="col-6">
<form>
<div className="mb-3">
<label htmlFor="scritta" className="form-label">Primo texto</label>
<input id="scritta" type="text" className="form-control" />
</div>
<div className="mb-3">
<label htmlFor="plain" className="form-label">Set email</label>
<input id="plain" type="text" className="form-control-plaintext"
value="clash92@gmail.com" readOnly />
</div>
....
</form>
</div>
</div>
We can add the disabled or readOnly attribute to remove the interaction with inputs.
We can add multiple inputs to a single form row, like floating-form, Datalist, and <select>.
We add a row container to the form to create col inputs.
//Textarea can increase its height with rows=""
<div className="row justify-content-center">
<div className="col-6">
<form>
<div className="row">
<div className="col-6"> floating input... </div>
<div className="col-6"> input+form-text... </div
<div className="col-12 mb-3">
<label for="muro" className="form-label">Your text here</label>
<textarea id="muro" rows="3" className="form-control"></textarea>
</div>
<div className="col-8 mb-2"> datalist... </div>
<div className="col-4 mb-2"> select... </div>
<div className="col-3"> radioButton... </div>
<div className="col-4"> radioButton... </div>
<div className="col-5"> reverseCheck... </div>
<div className="col-10 mt-3">
<button className="btn btn-primary" type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
We use form-check (or form-check reverse) to add radio form-check-input buttons and form-check-label, in order to display them inline we used col containers for each.
//Radio buttons need to share the Input Name
//Reverse swaps places between input and label
<div className="col-3">
<div className="form-check">
<input id="uno" type="radio" className="form-check-input" name="residenza" />
<label for="uno" className="form-check-label">Resident</label>
</div>
</div>
<div className="col-4">
<div className="form-check">
<input id="due" type="radio" className="form-check-input" name="residenza" />
<label for="due" className="form-check-label">No resident</label>
</div>
</div>
<div className="col-5">
<div className="form-check form-check-reverse">
<input id="resident" type="checkbox" className="form-check-input" />
<label for="resident" className="form-check-label">Owned house</label>
</div>
</div>
Input-groups can extend a form-control and include labels and buttons.
We use required to validate the input before the form submits.

Bootstrap validation is implemented with the has-validation container class.

The bootstrap form button, on adaptive columns, needs a set width input and an auto width in button.

We use the form-range bootstrap for the range input type.
We can set its min-max value (by default 0-100) and steps for the value of each range snap.
//It can be disabled and has a line background and a thumb
<div>
<label htmlFor="follow" className="form-label">Range of values</label>
<input id="follow" min="0" max="5" steps="1" type="range" className="form-range" />
</div>

We use the form-control-color Bootstrap for the input type color.
//We get rounded color window
<div>
<label htmlFor="crayon" className="form-label">Pick a color</label>
<input id="crayon" type="color" className="form-control form-control-color" />
</div>

We use form-control for the type="file" input.
//we get the "scegli file" text included in the form-control with the file name
<div>
<label htmlFor="face" className="form-label">Upload file</label>
<input id="face" type="file" className="form-control" />
</div>
Last updated
Was this helpful?