Bootstrap4 Create a Web Page
Next, we will use Bootstrap4 to create a simple responsive web page.
Before learning, we can first look at the effect:https://www.example.com/try/demo_source/bootstrap3-makewebsite.htm
HTML Code
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>My First Bootstrap 4 Page</h1>
<p>Resize the browser window to see the effect!</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navigation</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-4">
<h2>About Me</h2>
<h5>My Photo:</h5>
<div class="fakeimg">Insert image here</div>
<p>Introduction about me..</p>
<h3>Some Links</h3>
<p>Description text</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active state</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>Title</h2>
<h5>Subtitle</h5>
<div class="fakeimg">Image</div>
<p>Some text..</p>
<p>Example Tutorial, what you learn is not only technology, but also dreams!!! Example Tutorial, what you learn is not only technology, but also dreams!!! Example Tutorial, what you learn is not only technology, but also dreams!!!</p>
<br>
<h2>Title</h2>
<h5>Subtitle</h5>
<div class="fakeimg">Image</div>
<p>Some text..</p>
<p>Example Tutorial, what you learn is not only technology, but also dreams!!! Example Tutorial, what you learn is not only technology, but also dreams!!! Example Tutorial, what you learn is not only technology, but also dreams!!!</p>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Footer content</p>
</div>
Try it Yourself »