Incorporating VS 2017 and bootstrap 4.1.1 into an MVC 5 page, I am facing a challenge in adding right-side padding to an image without distorting the circular shape of the image, as shown below. When I apply the padding, the circle becomes warped, but removing it causes the text to be too close to the image on the right side:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12">
<br />
<figure>
<style>
.imgRightPadding20 {
padding-right: 20px;
}
</style>
<img class="img-fluid float-left rounded-circle imgRightPadding20" src="https://picsum.photos/200" alt="PersonName" />
<p> Some text about this person. </p>
</figure>
</div>
</div>The image currently is a standard square image, and I aim to utilize the rounded-circle feature from Bootstrap without compromising its circular form when applying padding to the right side for text alignment purposes. How can I achieve this within the Bootstrap 4.1.1 framework? Thank you for your assistance.
========== UPDATE July 5, 2018
To provide context, below are excerpts from the _Layout.cshtml file in my MVC 5 project. If I implement the suggested tag changes at the beginning of the initial code snippet, should these changes also be added to the _Layout.cshtml file or just to the affected pages? This process has left me somewhat perplexed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - some person Website</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body style="padding-top:unset; padding-bottom:unset">
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<div class="container">
<a href="#" class="navbar-brand">Some Person</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="Index">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/Home/About">About</a></li>
<!-- <li class="nav-item"><a class="nav-link" href="/Home/Contact">Contact</a></li>li>-->
</ul><!-- navbar-nav -->
</div><!-- container -->
</nav>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - ASP.NET MVC 5 web application built by some person</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
========== UPDATE July 7, 2018 11:30pm
Attached is an image showcasing the bootstrap Nuget package I have integrated into my VS 2017 project:
https://i.sstatic.net/x1DUj.jpg
========= UPDATE July 7, 2018 12:27 a.m. The most viable solution for me was enclosing the img tag within a div tag and applying the float-left and padding styles to the div rather than the img itself. This adjustment ensured all other elements align properly within VS 2017, obviating the need for additional script statements in the MVC 5 pages or the css link at the top of the page.
<div class="row">
<div class="col-sm-12">
<figure>
<style>
.imgRightPadding20 {
padding-right: 20px;
}
</style>
<div class="float-left imgRightPadding20">
<img class="img-fluid rounded-circle" src="~/Content/Images/someperson-200x200.jpg" alt="some person" />
</div>
<p>Some text about the person </p>
</figure>
</div>
</div>