I am trying to align two columns next to each other instead of stacking them on top of one another. I have adjusted the spacing to ensure there is enough room for them to sit side by side. I have included an image illustrating the positioning I am aiming for, with Object B moving to the new position as indicated.
@model HomeIndexViewModel
@{
ViewData["Title"] = "Home Page";
}
<div class="container">
<p class="headerText">Most Recent Movies</p>
<div class="row">
<div class="col-lg-10 movieTitleText">
@foreach (var movie in Model.Movies)
{
<div class="col-md-4 movieTitleText">
<div>
<img src="~/images/@movie.ImageUrl" alt="Visual Studio" class="img-fluid" style="width: 100%; height:100px;" />
<h4 class="">@movie.Name <span class="ratingInTitleToRight">☆@movie.Rating</span></h4>
<div class="genreTitleTag">@movie.Genre</div>
<div class="">@movie.Storyline</div>
<a asp-area="" asp-controller="Movie" asp-action="Watchlist" asp-route-id="@movie.Name" class="text-warning genreTitleTag">+ Add to Watchlist</a>
</div>
@*<partial name="_HomeMoviePartial" model="movie" />*@
</div>
}
</div>
<div class="col-lg-2">
<div class="well">
<p>Place FOR NEWS</p>
</div>
<div class="well">
<p>Place FOR NEWS</p>
</div>
</div>
</div>
</div>