<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Docs</a>
</li>
<li class="nav-item d-block d-lg-none">
<a class="nav-link " href="#">Notiffication</a>
</li>
<li class="nav-item d-block d-lg-none">
<a class="nav-link" href="#">Growls</a>
</li>
<li class="nav-item d-block d-lg-none">
<a class="nav-link" href="#">Logout</a>
</li>
</ul>
<form class="drag form-inline my-2 my-lg-0 d-none d-lg-block" style="text-align: right: ">
<input type="text" name="search" placeholder="Search..">
</form>
<div class="d-none d-lg-block">
<a href="#"><i class="fas fa-bell fa-2x mx-2" style="color:#E5E0E0;position: relative;top:7px;"></i></a>
<a href="#"><img src="img/avatar.jpg" alt="" style="border-radius: 50%;width: 40px;" onclick="window.open(this.src)"></a>
</div>
</div>
</nav>
<!-- end nav -->
<div class="container-fluid" style="margin-top: 70px;">
<div class="row justify-content-center justify-content-md-between" >
<div class="col-12 col-md-3" id="aboutme">
<div class="in4">
<img src="img/bg1.jpg" alt="" onclick="window.open(this.src)">
<div class="card align-items-center">
<img class="card-img-top" src="img/girl1.jpg" alt="Card image cap" onclick="window.open(this.src)">
<div class="card-block mt-5">
<h4 class="card-title myheading">Sơn Tít</h4>
<p class="card-text">I wish i was a little bit taller, wish i was a baller, wish i had a girl… also.</p>
<p>
<span class="font-weight-bold" style="border-right: 1px solid grey;padding-right:10px;">Friends 12M</span>
<span class="pl-2 font-weight-bold">Enemies 1</span>
</p>
</div>
</div>
</div>
<div class="about">
<p class="myheading">About<a href="#" style="font-size: 15px; "> .edit</a></p>
<ul>
<li> <i class="far fa-calendar"></i> Went to<a href="#"> Oh, Canada</a></li>
<li><i class="fas fa-user-friends"></i> Became friends with<a href="#"> Obama</a></li>
<li><i class="far fa-smile-wink"></i> Worked at<a href="#"> Google</a></li>
<li><i class="fas fa-home"></i> Lives in<a href="#"> San Francisco, CA</a></li>
<li><i class="fas fa-map-marker"></i> From<a href="#">Seattle, WA</a></li>
</ul>
</div>
<div class="photo">
<p class="myheading">Photo <a href="#" style="font-size: 15px; "> edit</a> </p>
<div class="row justify-content-center">
<div class="col-6 pr-1">
<img src="https://bootstrap-themes.github.io/application/assets/img/instagram_5.jpg" alt="" onclick="window.open(this.src)">
</div>
<div class="col-6 pl-1">
<img src="https://bootstrap-themes.github.io/application/assets/img/instagram_6.jpg" alt="" onclick="window.open(this.src)">
</div>
</div>
<div class="row justify-content-center">
<div class="col-6 pr-1">
<img src="https://bootstrap-themes.github.io/application/assets/img/instagram_7.jpg" alt="" onclick="window.open(this.src)">
</div>
<div class="col-6 pl-1">
<img src="https://bootstrap-themes.github.io/application/assets/img/instagram_8.jpg" alt="" onclick="window.open(this.src)">
</div>
</div>
<div class="row justify-content-center">
<div class="col-6 pr-1">
<img src="https://bootstrap-themes.github.io/application/assets/img/instagram_9.jpg" alt="" onclick="window.open(this.src)">
</div>
<div class="col-6 pl-1">
<img src="https://bootstrap-themes.github.io/application/assets/img/instagram_10.jpg" alt="" onclick="window.open(this.src)">
</div>
</div>
</div>
</div>
<!-- end-about me -->
<div class="col-11 col-md-5" id="content">
<div class="message my-md-0 px-2">
<form action="action_page.php">
<input type="text" placeholder="Message" name="search">
<button type="submit"><i class="fas fa-camera-retro"></i></button>
</form>
</div>
<div class="sontit">
<div class="row" >
<div class="col-2 px-0 pl-1 pl-md-2">
<img class=" mt-3 myimg-medium" src="img/girl1.jpg" alt="Card image cap" onclick="window.open(this.src)">
</div>
<div class="col-10 tit2">
<h4 class="mt-3 myheading">Sơn Tít</h4>
<p>Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<img src="https://bootstrap-themes.github.io/application/assets/img/unsplash_1.jpg" alt="" onclick="window.open(this.src)">
<div class="row mt-2">
<div class="col-12 col-md-6 pr-md-1">
<img src="https://bootstrap-themes.github.io/application/assets/img/instagram_1.jpg" alt="" onclick="window.open(this.src)">
</div>
<div class=" col-12 col-md-6 pl-md-1 mt-md-0 mt-2">
<img src="https://bootstrap-themes.github.io/application/assets/img/instagram_13.jpg" alt="" onclick="window.open(this.src)">
</div>
</div>
<img class="mt-2" src="https://bootstrap-themes.github.io/application/assets/img/unsplash_2.jpg" alt="" onclick="window.open(this.src)">
<div class="row mt-3 px-3">
<div class="col-2 px-0">
<img class="myimg-small" src="img/girl4.jpg" alt="" style="margin-top:15px;">
</div>
<div class="col-10 pl-0">
<p><h4 class="myheading">Jacon Thornton:</h4> Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.</p>
</div>
</div>
<div class="row mt-3 px-3">
<div class="col-2 px-0">
<img class="myimg-small" src="img/girl6.jpg" alt="" style="margin-top:15px;" onclick="window.open(this.src)">
</div>
<div class="col-10 pl-0">
<p><h4 class="myheading">Mark Otto: </h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row thornton px-0 mx-0">
<div class="col-2 px-0 pl-1 pl-md-2 p-md-0">
<img class="myimg-medium mt-3" src="img/girl1.jpg" alt="Card image cap" onclick="window.open(this.src)">
</div>
<div class="col-10">
<p> <h4 class="myheading">Jacob Thornton</h4>Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="row Mark px-0 mx-0">
<div class="col-2 px-0 pl-1 pl-md-2 mt-2 mt-md-0">
<img class="myimg-medium" src="img/girl8.jpg" alt="Card image cap" onclick="window.open(this.src)">
</div>
<div class="col-10">
<p> <h4 class="myheading">Mark Otto</h4>Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img src="https://bootstrap-themes.github.io/application/assets/img/instagram_3.jpg" alt="" onclick="window.open(this.src)">
<div class="row mt-3 px-3">
<div class="col-2 px-0">
<img class="myimg-small" src="img/girl6.jpg" alt="" style="margin-top:15px;" onclick="window.open(this.src)">
</div>
<div class="col-10 pl-0">
<p><h4 class="myheading">Dave Gamache: </h4> Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.</p>
</div>
</div>
</div>
</div>
</div>
<!-- end content- -->
<div class="col-12 col-md-3" id="footer">
<div class="alert alert-warning alert-dismissible fade show px-0 mt-3 mt-md-0" role="alert">
<strong>Visit your profile!</strong> Check your self, you aren't looking well.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="Sponsored px-3 py-3">
<img src="https://bootstrap-themes.github.io/application/assets/img/instagram_2.jpg" alt="" onclick="window.open(this.src)">
<h4 class="myheading mt-3"> It might be time to visit Iceland.</h4>
<p>Iceland is so chill, and everything looks cool here. Also, we heard the people are pretty nice. What are you waiting for?</p>
<button type="button" class="btn btn-outline-primary">Buy a ticket</button>
</div>
<div class="like mt-3 px-3 py-3 ">
<h4 class="myheading">Likes <a href="#" style="font-size: 13px;">.View All</a> </h4>
<div class="row justify-content-start">
<div class="col-2 pl-md-2 pr-0 text-right">
<img class="myimg-medium mt-3" src="img/girl9.jpg" alt="" onclick="window.open(this.src)">
</div>
<div class="col-10 pl-md-4">
<p><h4 class="myheading">Jacob Thornton</h4></p>
<button type="button" class="btn btn-outline-primary mt-0 px-1 py-1"><i class="fab fa-facebook-f"></i> Follow</button>
</div>
</div>
<div class="row">
<div class="col-2 pl-md-2 pr-0 text-right">
<img class="myimg-medium mt-3" src="img/girl11.jpg" alt="" onclick="window.open(this.src)">
</div>
<div class="col-10 pl-md-4">
<p><h4 class="myheading">Mark Otto</h4></p>
<button type="button" class="btn btn-outline-primary mt-0 px-1 py-1"><i class="fab fa-facebook-f"></i> Follow</button>
</div>
</div>
</div>
<p class="para">Dave really likes these nerds, no one knows why though.</p>
<div class="copyright">
© 2018 Bootstrap <a href="#">About</a> <a href="#">Help</a> <a href="#">Terms</a> <a href="#">Privacy </a> <a href="#">Cookies</a> <a href="#">Ads</a> <a href="#">Info </a> <a href="#">Brand</a> <a href="#">Status</a> <a href="#">Apps</a> <a href="#">Jobs</a> <a href="#">Advertise</a>
</div>
</div>
<!-- end footer -->
</div>
</div>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>