Creating a clear division between the jumbotron and column divs using whitespace in Bootstrap design

Having some issues with my Bootstrap layout. I have a jumbotron div at the top, which looks fine, but the columns and rows underneath are not aligning properly and seem to be wider than they should be. I suspect it might have something to do with the grid system because I want everything to be centered on the page like in the screenshot.

https://i.sstatic.net/zsS4f.png

Here is the relevant code related to this problem:

<div class="jumbotron">
  <h1 class="display-4">Welcome</h1>
  <p class="lead">This is my online portfolio</p>
  <hr class="m4-4">
  <p>Sometimes, it's good to think outside the box</p>
</div>

<div class="row justify-content-md-center text-center bg-secondary">
  <div class="col col-6 " id="about_me">
    <h2>About Me</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada
        vel nibh at efficitur. Morbi feugiat orci in laoreet luctus. Sed dolor ipsum,
        lobortis et elit at, tempor maximus enim. Donec semper est vel lectus malesua
        da posuere. Curabitur sodales tristique leo quis scelerisque. Fusce porttitor,
        diam malesuada molestie hendrerit, tellus orci rhoncus risus, id dictum nulla
        risus consectetur orci.<p>
  </div>
</div>

Also, everything is wrapped inside the container class, including the navigation bar and all elements after the opening body tag. Any suggestions on how to resolve this issue? Thank you!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you want to eliminate that extra space, Bootstrap 4 offers a straightforward solution with its built-in classes.

Simply apply the mb-0 class to your jumbotron element and you're good to go!

By using the mb-0 class, you are essentially setting the margin-bottom to zero, effectively getting rid of any unwanted space at the bottom.

To prevent the horizontal scrollbar from appearing, insert a div with the container-fluid class like this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="jumbotron mb-0">
    <h1 class="display-4">Welcome</h1>
    <p class="lead">This is my online portfolio</p>
    <hr class="m4-4">
    <p>Sometimes, it's good to think outside the box</p>
</div>

<div class="container-fluid">
    <div class="row justify-content-md-center text-center bg-secondary">
        <div class="col col-6 " id="about_me">
            <h2>About Me</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada vel nibh at efficitur. Morbi feugiat orci in laoreet luctus. Sed dolor ipsum, lobortis et elit at, tempor maximus enim. Donec semper est vel lectus malesua da posuere. Curabitur sodales tristique leo quis scelerisque. Fusce porttitor, diam malesuada molestie hendrerit, tellus orci rhoncus risus, id dictum nulla risus consectetur orci.
                <p>
        </div>
    </div>
</div>

Just a friendly reminder: Avoid using !important declarations whenever possible. It's considered a best practice to write clean css code that doesn't rely on them. Save !important for temporary testing purposes only. Luckily, in this case, you don't need custom css because Bootstrap 4 provides the necessary classes for styling.

Answer №2

The spacing issue between the jumbotron and other divs may be due to margins. By adding margin-bottom: 0 !important; to the .jumbotron class, the elements came closer together.

However, it seems like this solution only partially addressed the problem since CSS for the other divs was not provided.

.jumbotron {
margin: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">

        <h1 class="display-4">Welcome</h1>

        <p class="lead">This is my online portfolio</p>
        <hr class="m4-4">
        <p>Sometimes, it's good to think outside the box</p>
      </div>

      <div class="row justify-content-md-center text-center bg-secondary">
        <div class="col col-6 " id="about_me">
          <h2>About Me</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada
              vel nibh at efficitur. Morbi feugiat orci in laoreet luctus. Sed dolor ipsum,
              lobortis et elit at, tempor maximus enim. Donec semper est vel lectus malesua
              da posuere. Curabitur sodales tristique leo quis scelerisque. Fusce porttitor,
              diam malesuada molestie hendrerit, tellus orci rhoncus risus, id dictum nulla
              risus consectetur orci. <p>
        </div>
      </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The CSS popup box fails to reset its data after being closed, and the closure button does not effectively close the popup

I am having an issue with a login popup on my website. Whenever I fill in the login or registration information and then close the popup, the next time I open it, the input box still contains the previous data. How can I reset the popup to always open with ...

javascripthtmlcssflexboxfrontend

arranging the divs based on the space allocation within the page

Is there a way to neatly organize the divs on a page, depending on available space? I want them to align horizontally if there is enough room before moving to the next line. The tab-content parent div may contain several divs. Any suggestions on how this c ...

htmlcss

Which CSS preprocessor is the best choice for WordPress: SASS or

After comparing SASS and LESS, I found that SASS is the clear winner in my opinion. Unfortunately, setting up SASS on my server requires ruby, gems, and other tools that I don't have access to. On the other hand, it seems like adding LESS to my proj ...

csssassless

Troubleshooting Dynamic Input Issue - Incorrect Appending Behaviour - Image Attached

I am working on a project that involves adding input fields dynamically using JavaScript. However, I've encountered an issue where the styling of the first input field is not applied correctly when it is clicked for the first time. You can see the dif ...

javascriptphpjqueryhtmldynamic

Using the JQuery `append()` method, I aim to generate a pair of Bootstrap columns by iterating through an associative array's keys

I've been struggling to design a form that includes labels and inputs. I have an associative array with labels as keys and corresponding values as array objects. My goal is to create a bootstrap horizontal form with two columns (col-6) each. However, ...

javascriptjqueryarraysbootstrap-4

Permanent header that clicks into place below the primary fixed header

I've been collaborating with fellow developers on this platform to tackle a persistent issue related to a fixed header. Here is the updated fiddle for reference: http://jsfiddle.net/f95sW/ The Challenge 1) As you scroll down the page, the yellow bl ...

jquerycssfixed

"Capturing the essence of your online presence: The

I recently completed a website for my Students Organization, which includes a special page dedicated to recognizing the individuals who helped organize our activities. Each member is represented with a photo on this page, sourced from their Facebook profil ...

javascripthtmlcssfacebookfacebook-graph-api

Using ng-repeat in Angular causes the style of a div to become hidden

Utilizing angular ng-repeat to generate multiple divs, the original template html code is as follows: <div class="span5 noMarginLeft"> <div class="dark"> <h1>Timeline</h1> <div class="timeline"> <div c ...

htmlcssangularjs

Formatting text and images in CSS

Looking to align images at the bottom of each column in a div with 3 columns, but struggling due to varying text lengths. Any tips on how to achieve this? https://i.sstatic.net/fuPgl.png Thank you, Carolin #content_row{ margin-top:150px; marg ...

htmlcssbootstrap-4

Technique for adding an element's attribute to a span based on the element's class

I am aiming to display a maximum of three selections within my h4 tag, based on the number of options that the user clicks. For instance, the h4 tag should show 'Department1, Department 2,' if no elements are selected or have the class active, i ...

javascriptjqueryhtml

Issue with bootstrap-selectpicker not updating the width of the selection box

I've been attempting to adjust the width of the selectpicker box that displays selected options, but so far all my efforts have been fruitless. I can't seem to change the width or color of the box. If anyone has any ideas or suggestions, they wo ...

jqueryhtmlcssbootstrap-4bootstrap-selectpicker

Troubleshooting: HTML Image Map not showing tooltips

Everything seems to be working fine on the webpage, except for the tooltips on certain areas of the image. Only the first area title displays a tooltip when hovering over any part of the image. Here is the HTML code I am using: <html> <map nam ...

htmltooltipimagemap

triggering a button click event in HTML

Below is the creation of a div: <div class="area1"> </div> By using AJAX, I was able to alter the HTML for the aforementioned div with this call: $('#abutton').click(function(e) { e.preventDefault(); ...

htmljqueryajax

CSS - Mysterious Gaps Found in Div Block

Below is the code snippet I am currently working with: html { height: 100%; overflow: hidden; } body { height: 100%; color: #bdc3c7; font-family: Montserrat; background-color: #3E4651; } .nav { ...

htmlcss

Panel with Bootstrap Collapse feature causes a slight movement when padding is applied

After applying the collapse behavior to a panel element, I noticed that the animation stops abruptly at the padding of .panel-body, causing it to snap instantly to height. This issue can be observed in the basic example on codepen: http://codepen.io/FiveSi ...

jquerycsstwitter-bootstrap

Choose the first element of its type and disregard any elements nested within it

I need to change the color of only the first p element within a specific div. Using :first-child would work in a simple example, but in my project, there are multiple elements and more could be added in the future. I want to avoid using :first-child alto ...

htmlcss

Utilize Python and BeautifulSoup for parsing HTML with multiple tags and classes

I am currently attempting to navigate through a complex HTML structure. Here is the snippet of the HTML code: <div class="example one"> <ol class="example two"> <li class="example three"> My object ...

pythonhtmlbeautifulsoup

It seems like Chrome does not recognize 0 as a numerical value

Take a look at this snippet of HTML code: <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <form name='test'> <input type='number&apo ...

htmlgoogle-chromechromium

Achieving hover effects on <a> tags in CSS without using the href attribute

I'm looking to create a picture that changes when hovered over, and I've already achieved this using CSS by adjusting the z-index. However, I don't want users to be able to click on the image. To prevent this, I have removed the href from th ...

cssxhtmlhoverhrefinternet-explorer-6

Having trouble getting jQuery .append() to behave the way you want?

I have created a code snippet to display a table like this: $("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr>"); $("#results").append("<tr><td>John</td><td>123123123 ...

javascriptjquerycss