This easy-to-follow step by step tutorial will help you start a blog & build an exciting, profitable, and sustainable business online, even as a complete beginner with zero experience. Let’s begin…
If you are NOT making money online …
Today I am sharing you how to build user profile in bootstrap4 so lest starts-
Some step which you have to follow like-
1) Open your Sublime
2) Then open your XAMMP/WAMPP which you used .
3) Collect the bootstra4 CDN .
4) create css file if you needed.
here see the code
1) sublime code -
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--Coded with love by shivani tiwari-->
<body>
<div class="container">
<div class="d-flex justify-content-center h-100">
<div class="image_outer_container">
<div class="green_icon"></div>
<div class="image_inner_container">
<img src="css/user.jpg">
</div>
</div>
</div>
</div>
</body>
2) boostrap4 and javascript and jquery CDN
3)open XAmmp
4) CSS code
<style type="text/css">
html,body{
height: 100%;
}
.container{
height: 100%;
align-content: center;
}
.image_outer_container{
margin-top: auto;
margin-bottom: auto;
border-radius: 50%;
position: relative;
}
.image_inner_container{
border-radius: 50%;
padding: 5px;
background: #833ab4;
background: -webkit-linear-gradient(to bottom, #fcb045, #fd1d1d, #833ab4);
background: linear-gradient(to bottom, #fcb045, #fd1d1d, #833ab4);
}
.image_inner_container img{
height: 200px;
width: 200px;
border-radius: 50%;
border: 5px solid white;
}
.image_outer_container .green_icon{
background-color: #4cd137;
position: absolute;
right: 30px;
bottom: 10px;
height: 30px;
width: 30px;
border:5px solid white;
border-radius: 50%;
}
</style>
5 Output
If you have any questions or if you get stuck with any step, I will be more than happy to help you. You can contact me and ask me for free advice.
Follow me on instagram shiwani___tiwari
follow on Quora https://www.quora.com/profile/Shivani-Tiwari-288
Thank you guys
No comments:
Post a Comment