Having trouble with aligning the Bootstrap grid in the center? Something seems to be off

I'm currently working on a project for Free Code Camp, but have encountered an issue. I am struggling to center the paragraph text below the image properly. The grid is set to 4 in this case.

<div class="container">
  <div class="row">
    <div class="jumbotron">
      <div class="col-xs-12">
        <h1 class="text-center text-uppercase">Bernie Sanders</h1>
        <em><h2 class="text-center">"The man who stands for the people"</h2></em>
        <img id="bernie" src="https://imgur.com/iw13OaU.jpg" alt="Bernie Sanders">
        <div class="col-xs-4 col-md-4">
          <h3 class="text-center" id="timeline">A timeline of Bernie Sanders Accomplishments</h3>
          <ul class="text-justify small" id="list">
          ...

https://codepen.io/thehiddencheese/pen/WMWJeW

htmlcsstwitter-bootstrap-4

Answer №1

To start, wrap your grid 4 within the .row element and apply the bootstrap [Flex Utilities] class .justify-content-center to that row:

<div class="row justify-content-center">
  <div class="col-sm-4"></div>
</div>

Alternatively, you can utilize the [offset] classes like this:

<div class="row">
  <div class="col-sm-4 offset-sm-4"></div>
</div>

Answer №2

To center the paragraph text below the image, you can apply text-align: center to the 

<div class="col-xs-4 col-md-4">
.

However, when using bullet points and center-aligned text together, it may appear a bit odd. In such cases, it's better to avoid using bullets :).

Here is the code for the suggested div tag:

<div class="col-xs-4 col-md-4" style="text-align: center;">

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

Angular tree dropdown menu structure

Check out this functional jsfiddle: working example for the secondary level In the jsfiddle, I am able to assign a brand from the first dropdown and a model from the second dropdown to each car created through ng-repeat. It is all working smoothly. Howev ...

javascripthtmlangularjsdropdown

Is the XPath in Selenium executed against the Document Object Model (DOM) or the HTML file

Currently, I am in the process of developing a library for analyzing webpages. My approach involves using Selenium to access elements on a webpage through xpath. I have been contemplating replacing Selenium with an offline xpath tool. However, upon furthe ...

javascripthtmldomseleniumxpath

Can non-mobile browsers handle touch events effectively?

Touch and gesture functionalities are no longer limited to mobile devices. When can we expect to see these features integrated into web apps for devices like the MacBook Pro or any other device with a touchpad or trackpad? I'm particularly interested ...

htmltouchcross-browser

Is there a way to modify sections of an href link depending on the URL selector?

<a class="change_this" href="http://www.site1.com">Link 1 Type 1</a> <a class="change_this" href="http://MyID.site1.com">Link 1 Type 2</a> <a class="change_this" href="http://www.site2.com/?refid=myid2">Link 2 Type 1</a> ...

jqueryhtml

Is it possible to adjust the button's position based on the location of the cursor?

I am just starting to learn JavaScript, so I am not yet familiar with all the commands involved. I have a code that includes a button which scrolls back to the top of the page, but I was wondering if there is a way to change the position of that button bas ...

htmlcssbuttonpositioncursor

Attempting to automate the process of clicking a button on a webpage using cefsharp

Hello, I am currently working with cefsharp and vb.net to develop a code that will help me navigate to the next page of a specific website. The website link is: https://www.recommendedagencies.com/search#{} My goal is to extract the list of company names ...

javascripthtmlcefsharp

Conceal the initial element featuring an image

Given that the post-body includes various elements, such as links and divs, I am interested in concealing only the first child element that contains an image. <div class="post-body"> <div class="separator"><img/></div> </div&g ...

jqueryhtmlimagehide

Locate the checkbox label using CSS

Is there a way to replace the standard checkboxes with font-awesome icons without modifying the generated HTML or using jQuery? EDIT: The code includes JavaScript that prevents me from making changes. Also, note that the label text class can be -1 or -2 a ...

htmlcsscheckboxcss-selectors

Utilize PHP to sift through HTML content and extract a specific tag

How can I extract a specific form using PHP? $url = '<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <div class="waitmsg" id="WaitMessage ...

phphtml

Issue with setting position to the right using jQuery CSS

I have a div with the CSS property position:absolute. I am attempting to align it to the right using jQuery, but for some reason it is not working as expected. In the code snippet below, I am removing the left positioning and adding right:0 in order to m ...

javascriptjquerycss

Tips for organizing bower dependencies efficiently

I'm currently working on an HTML-based project and utilizing a bower.json file to manage all the dependencies: { "name": "MyProject", "version": "0.1", "main": "index.html", "dependencies": { "modernizr": "2.8.3", "classie": "1.0.1", ...

javascripthtmlnode.jsbower

What is the best way to bring a background image to the forefront?

I am currently working on creating a list of "fake videos" which are essentially images with a play icon on them. My plan is to use the play icon as a background and bring it to the front of the image by adjusting the z-index. However, no matter what I try ...

css

Issue with custom checkbox not changing when bootstrap collapse occurs

I've been searching for a solution and experimenting with different methods, but I just can't seem to make it work. Below is a CodePen example that showcases a custom checkbox with a toggle function to show/hide a div when checked, along with a ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Ensure that the main div remains centered on the page even when the window size is adjusted

Here is the code snippet: <div id="root"> <div id="child1">xxxx</div> <div id="child2">yyyy</div> </div> CSS : #root{ width: 86%; margin: 0 auto; } #root div { width: 50%; float: left; border: ...

javascriptjqueryhtmlcss

Ways to block past dates on bootstrap date picker starting from the current date and how to prevent dates beyond 90 days in the future from being selected on the

I am currently facing an issue with disabling previous dates from the current date in my code. While the functionality works well for the "From Date" date picker, I am having trouble implementing the same restriction for the "To Date" date picker after 90 ...

javascripthtmljquerybootstrap-4datepicker

Retrieve the chosen item to automatically fill in the input fields using Ionic 2 and Angular

My goal is to create a dropdown menu populated with a list of items, and when a product is selected, its price should automatically appear in the quantity field. <ion-item> <ion-label>Item</ion-label> <ion-select (ionChange)="getP ...

javascripthtmlangulartypescript

Position the Bootstrap right column to align absolutely on the right side of the page with no padding

I need assistance in designing a row with two columns. I am looking to align the right column to the right side of the page without using container-fluid. Can someone please help me with this? Thank you https://i.sstatic.net/4kh9O.jpg ...

cssbootstrap-4

handling a radius variable across various stylesheets in SASS

Recently, I started using SASS and I am very impressed with this tool. However, before diving in further, I have one question that I can't seem to find the answer to. What is the best approach for managing a variable value across multiple style sheet ...

csssass

When a div is covered by an if statement

One of the challenges I am facing is managing a view with multiple projects, some of which are active while others are not. In my function, if a project's deadline has passed, it displays '0' days left on the view, indicating that these are ...

javascriptphpcssfunction

Is there a way to utilize solely Javascript in order to crop an image?

Is there a way to crop an image using plain JavaScript? I need a function that can take an image with specific width, height, offsetX, and offsetY and create a new image of the specified portion. I'm not very knowledgeable about HTML5 canvas and simi ...

javascriptimagehtmlbrowsercrop