Post
Ask Question
Paul Drake

Paul Drake

  • NA
  • 37
  • 4.5k

CSS Bootstrap not working properly in ASP.net core mvc project

Dec 24 2020 6:25 AM
I'm having issues with my paragraph and my picture rendering in the same space. It's an asp.net 5 mvc project.
I'm using rider as my IDE.
 
Here is my layout source code.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  6.     <title>@ViewData["Title"] - Paul Drake's Website</title>  
  7.     <link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap-grid.css">  
  8.     <link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.css">  
  9.     <link rel="stylesheet" type="text/css" href="css/site.css">  
  10. </head>  
  11. <body>  
  12. <header>  
  13.     <div class="container">  
  14.         <div class="row">  
  15.             <div>  
  16.                 <a href="files/Resume 2020.pdf">Resume</a>  
  17.             </div>  
  18.             <div class="col-6 text-center">  
  19.                 <h1>Paul Drake's Website</h1>  
  20.             </div>  
  21.             <div class="dropdown">  
  22.                 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropDownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="False">My Projects</button>  
  23.                 <div class="dropdown-menu col-3" aria-labelledby="dropDownMenuButton">  
  24.                     <a class="dropdown-item" asp-controller="Movie" asp-action="GetMovies">Streaming Movie App</a>  
  25.                 </div>  
  26.             </div>  
  27.         </div>  
  28.     </div>  
  29. </header>  
  30. <main>  
  31.     <div class="container">  
  32.  @RenderBody();  
  33.  </div>  
  34. </main>  
  35. <script src="~/lib/jquery/dist/jquery.min.js"></script>  
  36. <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>  
  37. <script src="~/js/site.js" asp-append-version="true"></script>  
  38. @await RenderSectionAsync("Scripts", required: false)  
  39. </body>  
  40. </html>  
And here is my index page.
  1. @{  
  2.  ViewData["Title"] = "Paul Drake's Website";  
  3. }  
  4. <div class="row">  
  5.     <div class="col-6">  
  6.         <img src="./files/_DSC0630-Costco3.jpg" alt="My Picture">  
  7.     </div>  
  8.     <div class="col-6">  
  9.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Faucibus in ornare quam viverra orci sagittis eu volutpat odio. Id cursus metus aliquam eleifend mi in nulla. Suspendisse sed nisi lacus sed viverra tellus in. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. Massa id neque aliquam vestibulum morbi. Nullam non nisi est sit amet. Donec pretium vulputate sapien nec sagittis. Integer malesuada nunc vel risus commodo viverra maecenas. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Nisl pretium fusce id velit ut tortor. Accumsan sit amet nulla facilisi morbi tempus. Suspendisse sed nisi lacus sed viverra tellus in hac habitasse. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. At quis risus sed vulputate odio ut enim blandit.</p>  
  10.     </div>  
  11. </div>  

Answers (1)