Edge to edge background?

Appreciate this is probably a bit of a mess. What I am trying to achieve is the lightblue background in the ‘About Me’ section to run from the very edge to edge of the browser.

Hope that makes sense and would really appreciate if anyone is able to help me out.


You could set the jumbotron’s left and right padding to 0.

1 Like

Did you mean to have the image, About Me section in the same div with class=“jumbotron”? If not, then you should put a closing div before the div with class=“solidbackground”. If you did intend to put them in the div with class=“jumbotron”, then you should follow @sfiquet’s advice.

EDIT: After reading the Bootstrap 4 documentation, you can add .jumbotron-fluid class to the div with class=“jumbotron” and then change your html to the following for the INTRO section. Note the removal of the extra container row/col divs and the addition of the .text-center class to the divs with class=“container” which will center the content.

  <!-- start of INTRO -->
  <div id="intro" class="jumbotron jumbotron-fluid">
    <div class="container text-center">
      <img id="mountain" class="img-responsive rounded-circle center-block hidden-xs hidden-sm" src="https://www.globetrottinkids.com/content/forum/uploads/bb-plugin/cache/highlands-and-islands-1629079_1280-1024x576-square.jpg" alt="munro" />

    <div class="solidbackground text-center">
      <div id="aboutme">
        <h1 class="text-center">About Me</h1>
        <p class="text-center">
           Hi, my name is Kyle and I am an architectural assistant interested in learning to code. I have started FreeCodeCamp to help me achieve this.
  <!-- end of INTRO -->

FYI - At the top of your html code, you have the following:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

You can get rid of both of the references to Bootstrap 3, because you added the reference to Bootstrap 4 using the settings gear of the CSS module already.

1 Like

Really useful information here. Thank you!