Bootstrap 4 Forms Designing and Carousel Example

This bootstrap tutorial explains various bootstrap form design examples like vertical layout form design, horizontal form design, inline form design, Bootstrap 4 Form Validation, Bootstrap 4 Carousel examples, etc.

Forms are used in a web application to collect the input from the user through different fields.

There are 3 different form layout Bootstrap4 supported. Such as

Vertical Layout(default layout)
Horizontal Layout
Inline Form Layout

If you are new to bootstrap, check out Bootstrap tutorial.

Table of Contents

Bootstrap 4 Vertical Layout Form Design

The vertical layout form design is the default layout form design. We need to add all the tag inside the <form> tag. Add the “form-group” predefined class inside the form tag, where we can add our controls like the label, text box, etc.

The “form-group” class we need to add using the div tag. Add the label control and text box control inside the form control.

Make sure that your label control for attribute should be equal to text box id property. We need to mention the text box class attribute to “form-control” class.

Add some text in the placeholder attribute of the text box, so when the user opens the form he can able to see what the text box expected from the user.

In the below example I have added 3label control and 3 text box with one button control.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2 style=color:red>User Registration Form</h2>
  <form action="">
    <div class="form-group">
      <label for="fulName">Full Name</label>
      <input type="text" class="form-control" id="fulName" placeholder="Enter Name" name="Name">
    </div>
    <div class="form-group">
      <label for="qualification">Qualification</label>
      <input type="text" class="form-control" id="qualification" placeholder="Enter Your Qualification" name="email">
    </div>
    <div class="form-group">
      <label for="emailId">EmailId</label>
      <input type="email" class="form-control" id="emailId" placeholder="Enter Email" name="pswd">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>

Bootstrap4 Horizontal Form Design

We will see now how to design a horizontal form using bootstrap classes. Inside the form tag, we need to add form-horizontal class. The form group class add inside the form tag.

For horizontal form design in the label, tag adds control-label class. For proper allignment, I have added the bootstrap grid.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title>Bootstrap Example</title> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <div class="container"> 
    <h1 style=color:red>Bootstrap4 Horizontal Form</h1> 
    <form action="" class="form-horizontal"> 
        <div class="form-group"> 
            <label class="control-label col-sm-1" for="fulName">FullName</label> 
  <div class="col-sm-8"> 
                <input class="form-control" type="text" id="fulName" placeholder="Enter Name"> 
            </div> 
        </div> 
        <div class="form-group"> 
            <label class="control-label col-sm-1" for="emailId">Email</label> 
  <div class="col-sm-8"> 
                <input class="form-control" type="email" id="emailId" placeholder="Enter email id"> 
            </div> 
        </div> 
        <div class="form-group"> 
            <label class="control-label col-sm-1" for="password">Password</label> 
            <div class="col-sm-8"> 
                <input class="form-control" type="password" id="password" placeholder="Enter your password"> 
 </div> </div>
 <div class="form-group"> 
            <label class="control-label col-sm-1" for="id2"></label>
          
            <div class="col-sm-8"> 
                <button type="button" class="btn btn-success">Signin</button> 
            </div> 
            </div>
 </form> 
</div> 
  
</body> 
</html>

Bootstrap 4 Inline Form Design

Inline means set all the field in Bootstrap4 in a single line. So we need to use the “form-inline” class inside the form tag.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title>Bootstrap Example</title> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> 
</head> 
<body> 
 <div class="container"> 
    <h1 style=color:blue>Bootstrap4 Inline Form Design</h1> 
    <br> 
  <form class="form-inline" action=""> 
    <label for="fulName">Full Name:</label> 
    <input type="text" class="form-control" id="fulName" placeholder="Enter Username" name="fullName"> 
    <label for="Email">Enter Email:</label> 
    <input type="email" class="form-control" id="Email" placeholder="Enter Email" name="email"> 
    <label for="password">Enter Password:</label> 
    <input type="password" class="form-control" id="password" placeholder="Enter password" name="password"> 
    <button type="button" class="btn btn-primary">login</button> 
    </form> </div> 
</body> 
</html>

Bootstrap Inline Form Design With Utilities

Using the utilities in the Bootstrap4 we can add some spacing. “mb-2 mr-sm-2” class are using the space purpose.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:blue>Bootstrap 4 Inline Form Design</h2>
  
  <form class="form-inline" action="/action_page.php">
  <label for="name" class="mb-2 mr-sm-2">Enter Full Name:</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="Enter Full Name" name="Name">
    <label for="email2" class="mb-2 mr-sm-2">Enter Gamil Id:</label>
    <input type="email" class="form-control mb-2 mr-sm-2" id="email2" placeholder="Enter Gmail" name="email">
    <label for="pwd2" class="mb-2 mr-sm-2">Enter Password:</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="pwd2" placeholder="Enter Password" name="password">
      <button type="submit" class="btn btn-primary mb-2">LogIn</button>
  </form>
</div>
</body>
</html>

Bootstrap 4 Form Control Size

Bootstrap 4 provides form-control-lg and form-control-sm classes by which we can increase and decrease the field size. We need to add the class inside the <input> tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap4 Form Size</h2>
  <form action="">
    <div class="form-group">
      <label for="fulName">Full Name(Small Size)</label>
      <input type="text" class="form-control form-control-sm" id="fulName" placeholder="Enter Name" name="Name">
    </div>
    <div class="form-group">
      <label for="qualification">Qualification(Default Size)</label>
      <input type="text" class="form-control" id="qualification" placeholder="Enter Your Qualification" name="email">
    </div>
    <div class="form-group">
      <label for="emailId">EmailId(Large Size)</label>
      <input type="email" class="form-control form-control-lg" id="emailId" placeholder="Enter Email" name="pswd">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
</body>
</html>

Bootstrap 4 Form Label Size

Using the Bootstrap 4 “col-form-label-sm” and “col-form-label-lg” classes we can increase and decrease the label size. We need to add the class inside the label tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2 style=color:red>Bootstrap4 Form Label Size</h2>
  <form action="">
    <div class="form-group">
      <label for="fulName" class="col-form-label col-form-label-sm">Full Name(Small Size)</label>
      <input type="text" class="form-control form-control-sm" id="fulName" placeholder="Enter Name" name="Name">
    </div>
    <div class="form-group">
      <label for="qualification" class="col-form-label">Qualification(Default Size)</label>
      <input type="text" class="form-control" id="qualification" placeholder="Enter Your Qualification" name="email">
    </div>
    <div class="form-group">
      <label for="emailId" class="col-form-label col-form-label-lg">EmailId(Large Size)</label>
      <input type="email" class="form-control form-control-lg" id="emailId" placeholder="Enter Email" name="pswd">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>

Bootstrap 4 Add help-text in the Form control

In the Bootstrap 4 form, we can add the help text below the text box so that it will give hints to the user. So we need to add “form-text text-muted” class inside the <small> tag.

The text box where we want to add the help text writes the small tag below it.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap4 Form Help Text</h2>
  <form action="">
    <div class="form-group">
      <label for="fulName" class="col-form-label">Full Name</label>
      <input type="text" class="form-control " id="fulName" placeholder="Enter Name" name="Name">
	  <small class="form-text text-muted">
                Name should be 0-256 character
            </small>
    </div>
    <div class="form-group">
      <label for="qualification" class="col-form-label">Email</label>
      <input type="email" class="form-control" id="qualification" placeholder="Enter Your Email" name="email">
	  <small class="form-text text-muted">
                Email should contain @ symbol
            </small>
    </div>
    <div class="form-group">
      <label for="emailId" class="col-form-label ">Password</label>
      <input type="password" class="form-control " id="emailId" placeholder="Enter Password" name="pswd">
	  <small class="form-text text-muted">
                Password should contains a special character and a number
            </small>
    </div>
    <button type="submit" class="btn btn-primary">Sign In</button>
  </form>
</div>
</body>
</html>

Bootstrap 4 Creating Static Form Control

In the Bootstrap 4 some time we want to design a form where instead of form control we need to display a plain text. So for that, we need to use “form-control-plaintext” class with a read-only attribute.

Whatever plain text we want to display we need to write in the value tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2 style=color:red>Bootstrap4 Form Static Control</h2>
  <form action="">
    <div class="form-group">
	<label for="fulName" class="col-form-label">Full Name</label>
	  <input type="text"  readonly class="form-control-plaintext" id="fulName" placeholder="Enter Name" name="Name" value="P Padmini Kumari">
	  </div>
    <div class="form-group">
      <label for="qualification" class="col-form-label">Email</label>
      <input type="email" class="form-control" id="qualification" placeholder="Enter Your Email" name="email">
	  
    </div>
    <div class="form-group">
      <label for="emailId" class="col-form-label ">Password</label>
      <input type="password" class="form-control " id="emailId" placeholder="Enter Password" name="pswd">
	  
    </div>
    <button type="submit" class="btn btn-primary">Sign In</button>
  </form>
</div>

</body>
</html>

Bootstrap 4 disabled form control

Bootstrap 4 we can disable the fields in form control using a disabled attribute.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap4 Form Static Control</h2>
  <form action="">
    <div class="form-group">
	<label for="fulName" class="col-form-label">Full Name</label>
	  <input type="text"  class="form-control" id="fulName" placeholder="Enter Name" name="Name"  disabled>
	  </div>
    <div class="form-group">
      <label for="qualification" class="col-form-label">Email</label>
      <input type="email" class="form-control" id="qualification" placeholder="Enter Your Email" name="email"  disabled>
	  
    </div>
    <div class="form-group">
      <label for="emailId" class="col-form-label ">Password</label>
      <input type="password" class="form-control " id="emailId" placeholder="Enter Password" name="pswd" disabled>
	  
    </div>
    <button type="submit" class="btn btn-primary">Sign In</button>
  </form>
</div>

</body>
</html>

Boostrap 4 Read-only form control or the disabled entire form

When we are using the disabled attribute using the <fieldset> attribute then the entire form will be disabled. We need to write the <fieldset> below the <form> tag.

In the above example, I have added the disabled attribute in the text field but did not add in the button.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2 style=color:red>Bootstrap4 Readonly Form Control</h2>
  <form action="">
  <fieldset disabled>
    <div class="form-group">
	
      <label for="fulName" class="col-form-label">Full Name</label>
	  
      <input type="text"  class="form-control" id="fulName" placeholder="Enter Name" name="Name"  disabled>
	  </div>
    <div class="form-group">
      <label for="qualification" class="col-form-label">Email</label>
      <input type="email" class="form-control" id="qualification" placeholder="Enter Your Email" name="email"  disabled>
	  
    </div>
    <div class="form-group">
      <label for="emailId" class="col-form-label ">Password</label>
      <input type="password" class="form-control " id="emailId" placeholder="Enter Password" name="pswd" disabled>
	  
    </div>
    <button type="submit" class="btn btn-primary">Sign In</button>
	</fieldset>
  </form>
</div>

</body>
</html>

Bootstrap 4 Form Validation

We can add the validation in Bootstrap4 form. We need to add “was-validated” class inside the form tag. The field in which we want to add the validation writes the required attribute.

The Valid message we need to write inside “valid-feedback” class. Using the “invalid-feedback” we can write the invalid message.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Bootstrap4 Form Validation</h2>
 
  <form action="/action_page.php" class="was-validated">
    <div class="form-group">
      <label for="fulName">FullName:</label>
      <input type="text" class="form-control" id="fulName" placeholder="Enter Name" name="Full Name" required>
      <div class="valid-feedback">Your Name is Valid</div>
      <div class="invalid-feedback">Donot left the field as blank</div>
    </div>
    <div class="form-group">
      <label for="emailId">Email</label>
      <input type="email" class="form-control" id="emailId" placeholder="Enter email" name="email" required>
      <div class="valid-feedback">Your Email is Valid</div>
      <div class="invalid-feedback">Donot left field as blank</div>
    </div>
	<div class="form-group">
      <label for="passwordId">Password</label>
      <input type="password" class="form-control" id="passwordId" placeholder="Enter Password" name="email" required>
      <div class="valid-feedback">Your Password is Valid</div>
      <div class="invalid-feedback">Donot left field as blank</div>
    </div>
   <button type="submit" class="btn btn-primary">Sign In</button>
  </form>
</div>

</body>
</html>

Bootstrap 4 Carousel

Using the Bootstrap 4 we can create image slider. So that we can display a huge amount of content in a small place. We can add the next and previous icon so that the user can navigate to the previous page and next page.

In the below example I have taken 3 images and add the previous and next icon.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 style=color:red>Bootstrap4 Carousel</h2>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <div class="carousel-inner">
  <div class="carousel-item active">
<img src="https://onlysharepoint2013.sharepoint.com/sites/TSInfoDemos/SiteAssets/Img.jpg" alt="Nature Pic Missing" width="1000" height="400">
</div>
<div class="carousel-item">
<img src="https://onlysharepoint2013.sharepoint.com/sites/TSInfoDemos/SiteAssets/img2.jpg" alt="Nature Pic Missing"  width="1000" height="400">
</div><div class="carousel-item">
      <img src="https://onlysharepoint2013.sharepoint.com/sites/TSInfoDemos/SiteAssets/img3.jpg" alt="Nature Pic Missing"  width="1000" height="400">
    </div>
  </div><a class="carousel-control-prev"  data-slide="prev"  href="#demo">
<span class="carousel-control-prev-icon"></span>
  </a><a class="carousel-control-next"  data-slide="next" href="#demo"><span class="carousel-control-next-icon"></span></a>
</div></div></body></html>

Add Caption To Bootstrap 4 Carousel

Bootstrap provides “carousel-caption” class. Using that class we can add the caption in Bootstrap 4 Carousel.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 style=color:red>Bootstrap4 Carousel Add Caption</h2>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <div class="carousel-inner">
  <div class="carousel-item active">
<img src="https://onlysharepoint2013.sharepoint.com/sites/TSInfoDemos/SiteAssets/Img.jpg" alt="Nature Pic Missing" width="1000" height="400">
<div class="carousel-caption">
        
        <p>Hill Station</p>
      </div>  
</div>
<div class="carousel-item">
<img src="https://onlysharepoint2013.sharepoint.com/sites/TSInfoDemos/SiteAssets/img2.jpg" alt="Nature Pic Missing"  width="1000" height="400">

<div class="carousel-caption">
        
        <p>Nature View</p>
      </div>   
</div><div class="carousel-item">
      <img src="https://onlysharepoint2013.sharepoint.com/sites/TSInfoDemos/SiteAssets/img3.jpg" alt="Nature Pic Missing"  width="1000" height="400">
      <div class="carousel-caption">
        
        <p>Sea Beach</p>
      </div>  
    </div>
  </div><a class="carousel-control-prev"  data-slide="prev"  href="#demo">
<span class="carousel-control-prev-icon"></span>
  </a><a class="carousel-control-next"  data-slide="next" href="#demo"><span class="carousel-control-next-icon"></span></a>
</div></div></body></html>

You may like following bootstrap tutorials:

Bootstrap table
SharePoint Online branding: Creating Accordion Widget or Collapsible panel with Bootstrap
How to Create Tabbed Menu using Bootstrap and HTML in SharePoint 2016/2013
bootstrap’s javascript requires jquery error in SharePoint online
Bootstrap accordion example

In the above Bootstrap 4 article, we discussed different form we can design Bootstrap 4 classes. We have also discussed Bootstrap 4 Carousel.

Bhawana Rathore

Hello Everyone!! I am Bhawana a SharePoint MVP and having about 10+ years of SharePoint experience as well as in .Net technologies. I have worked in all the versions of SharePoint from wss to Office 365. I have good exposure in Customization and Migration using Nintex, Metalogix tools. Now exploring more in SharePoint 2016 🙂 Hope here I can contribute and share my knowledge to the fullest. As I believe “There is no wealth like knowledge and no poverty like ignorance”