Aligning Content in the Middle of a Bootstrap Row

I'm struggling to horizontally center the content in the "row" class div. I've attempted using justify-content-center and other variations.

<div class="container">

    <div class="row">
        <div class="col-md-4 portfolio-item">
            <h3>
                <a href="#">Text</a>
            </h3>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text ever since the 1500s.
            </p>
            <p>
                It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
            </p>
        </div>
        <div class="col-md-4 portfolio-item">
            <a href="#" target="_blank">
                <img class="img-responsive" srcset="icon.png 1x, iconRetina.png 2x">                
            </a>
            <a href="#" target="_blank">
                <img class="img-responsive" srcset="downloadOnAppStore.png 1x, downloadOnAppStoreRetina.png 2x">                
            </a>
        </div>
    </div>

</div>

The current answers seem to center the content, but it's not exactly what I'm looking for. I want the width of the content to align with the center of the page, regardless of the page's width.

Current layout: https://i.sstatic.net/dX8Fv.png

I want to achieve a layout like this: https://i.sstatic.net/8v7H0.png

The issue appears to be that the columns are taking up 50% of the row's width.

htmlcssbootstrap-4

Answer №1

It appears that utilizing the justify-content-center class is the optimal choice:

.portfolio-item {
background-color: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<body>
 <div class="container">

        <div class="row justify-content-center">
            <div class="col-md-4 portfolio-item">
                <h3>
                    <a href="#">Text</a>
                </h3>
                <p>
                It is a well-known fact that a reader will be drawn to the readable content of a page when observing its layout. The use of Lorem Ipsum is to create a more natural flow of text, rather than using 'Content here, content here', which looks like scrambled English.
                </p>
                <p>
                Various publishing tools and web page editors now incorporate Lorem Ipsum as their default text, with many websites still in their preliminary stages using this placeholder text.
                </p>
            </div>
            <div class="col-md-4 portfolio-item">
                <a href="#" target="_blank">
                    <img class="img-responsive" srcset="icon.png 1x, iconRetina.png 2x">                
                </a>
                <a href="#" target="_blank">
                    <img class="img-responsive" srcset="downloadOnAppStore.png 1x, downloadOnAppStoreRetina.png 2x">                
                </a>
            </div>
        </div>
    </div>
    </body>

Answer №2

I managed to get the code to function below by implementing your code. The "justify-content-center" worked for me on the row. Additionally, I included "text-center" in your "col" class, just in case you want them centered too - but feel free to remove them if you prefer right alignment.

I encountered this issue myself when my bootstrap version was outdated. It could be the same problem you're facing.

<div class="container">

<div class="row justify-content-center">
    <div class="col-md-4 portfolio-item text-center">
        <h3>
            <a href="#">Text</a>
        </h3>
        <p>
            It is a well-known fact that a reader will be distracted by the readable content of a page when looking at its layout. The use of Lorem Ipsum ensures the text appears like readable English with a more or less normal distribution of letters, rather than resorting to 'Content here, content here'.
        </p>
        <p>
            Many desktop publishing software and web page editors now utilize Lorem Ipsum as their default text, and a quick search for 'lorem ipsum' will reveal numerous websites still in their early stages.
        </p>
    </div>
    <div class="col-md-4 portfolio-item text-center">
        <a href="#" target="_blank">
            <img class="img-responsive" srcset="icon.png 1x, iconRetina.png 2x">                
        </a>
        <a href="#" target="_blank">
            <img class="img-responsive" srcset="downloadOnAppStore.png 1x, downloadOnAppStoreRetina.png 2x">                
        </a>
    </div>
</div>

Answer №3

Bootstrap has a total of 12 grids available. If you are using 8 grids, you can make use of the class "offset-md-2" to push 2 grids from the left side, effectively centering your content.

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

<body>
 <div class="container">

        <div class="row">
            <div class="col-md-4 portfolio-item offset-md-2">
                <h3>
                    <a href="#">Text</a>
                </h3>
                <p>
                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
                </p>
                <p>
                Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
                </p>
            </div>
            <div class="col-md-4 portfolio-item">
                <h3>
                    <a href="#">Text</a>
                </h3>
                <p>
                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
                </p>
                <p>
                Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
                </p>
            </div>
        </div>
    </div>
    </body>

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

Answer №4

If you're looking for a simple solution, consider using Bootstrap's justify-content-center class.

Alternatively, you can achieve the same effect using pure CSS by applying the justify-content: center; property to the element with the row class. This works because Bootstrap's grid system is built on Flexbox. Simply assign the 'justify-content' property to the element with the row class, similar to how the justify-content-center class functions.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

    <div class="row" style="justify-content:center">
        <div class="col-md-4 portfolio-item">
            <h3>
                <a href="#">Text</a>
            </h3>
            <p>
                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
            </p>
            <p>
                Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
            </p>
        </div>
        <div class="col-md-4 portfolio-item">
            <a href="#" target="_blank">
                <img class="img-responsive" srcset="icon.png 1x, iconRetina.png 2x">                
            </a>
            <a href="#" target="_blank">
                <img class="img-responsive" srcset="downloadOnAppStore.png 1x, downloadOnAppStoreRetina.png 2x">                
            </a>
        </div>
    </div>

</div>

Answer №5

Follow this suggestion. Remember to include justify-content-center in your code.

.bg-color{
  background:#eee;
}
<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="container">
  <div class="row justify-content-center bg-color">
    <div class="col-md-4 portfolio-item">
      <h3>
        <a href="#">Text</a>
      </h3>
      <p>
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
      </p>
      <p>
        Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
      </p>
    </div> 
    <div class="col-md-4 portfolio-item">
      <h3>
        <a href="#">Text</a>
      </h3>
      <p>
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
      </p>
      <p>
        Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
      </p>
    </div>        
  </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

What methods can I use to ensure my images are optimized for mobile users?

I have gone through several other discussions related to this issue, but none of the suggested solutions are working for me. Even with max-width: 100% and height: auto, the images remain unresponsive. They appear fine on browsers like IE, FF, and Chrome on ...

htmlcssimagemobileresponsive

Notify when the SVG object is clicked based on its identifier

I'm interested in adding more complexity to this project, but before I can proceed, I need to be able to detect when a specific object element containing an SVG image with an ID is clicked. Each object is nested within a div. <div class="grid 18"&g ...

javascripthtmljquerysvg

Error: You can't call .text as a function in jQuery

While trying to retrieve the text from my td, I encountered the following error: $tds[2].text is not a function. The output of console.log('td',$tds[2]) shows: https://i.stack.imgur.com/OUngP.png $(document).ready(function() { $trs = $(&ap ...

javascriptjqueryhtml

Exploring ways to customize the input color of Material UI TextField when it is disabled [Version: 5.0.8]

I am having trouble changing the border color and text color when an input is disabled. I have tried multiple variations, as seen below: const textFieldStyle = { '& label': { color: darkMode?'#1976d2':'', } ...

javascriptcssreactjsmaterial-ui

Tips for creating jasmine unit test cases for an Angular 6 application with Bootstrap 4 modals

html <ng-template #content let-modal> <h1>Modal content inside this ng-template #content </h1> </ng-template> Button to trigger the modal <button (click)="open(content)" > Open modal </button> In TypeScript fil ...

bootstrap-4jasmineangular6karma-jasmineng-bootstrap

How can I create a new div element for every item in an array by utilizing JSX?

I am currently working on creating a div element for each item in an array using reactjs JSX. I wasn't sure how to tackle this, so I attempted the following approach: {results.map((element, index) => ( <div key={index} className={ ...

javascripthtmlarraysreactjs

What is the best way to extract the innerHTML of every button and exhibit it in a text box?

How can I create a simpler JavaScript code for clicking buttons to input letters into a text box? Instead of creating getElementByID for each button, is it possible to use some kind of loop? <div id="alpha" > <br/> <div align="cente ...

javascripthtmlcss

Displaying overlay when sidebar menu is expanded

I am working on creating a smooth overlay transition for when the sidebar menu opens and closes. When the overlay is clicked, I want the menu to close. This is what I have so far: $(document).ready(function() { $('#menu-toggle').click(fun ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using the Match() function with an array of objects

I am working with an object array containing multiple variables. let Novels = []; class Novel { constructor(isbn, title, author, edition, publication, year) { this.isbn = isbn; this.title = title; this.author = author; this.publicat ...

javascripthtmlarraysstring

The HTML header is not displaying at the proper width as intended

Let me lay out the blueprint I had in mind for my webpage: The body will have a width and height of 600 x 800 pixels with no padding, allowing elements to snugly align without any margin. Inside the body, there will be 3 key elements - a header, main c ...

htmlcss

What is the solution to removing the bottom margin from the jumbotron in the bootstrap framework?

I am building a website for my high school robotics team and I am new to HTML and CSS (bootstrap). I want to get rid of the gap between my banner and navbar on my site. Is there a way to remove that space? Check out our website: www.robotichive3774.com & ...

htmlcsstwitter-bootstrap

Adjust the floated item's width when it is moved downwards

I have two divs positioned side by side. The first div is 600px wide and the second is 200px wide, with some spacing in between. Both divs are floated to the left so that if the window size is reduced, the second div will move below the first. My goal is ...

htmlcss-float

Maximizing CSS opacity for optimal performance in image fading

I'm working on creating a smooth fade in-out effect for the images in my photo gallery by adjusting the CSS opacity value using JavaScript. However, I've noticed that this process is quite sluggish on certain computers, such as my relatively new ...

javascriptcsshtmlcanvas

Most efficient method for dynamically changing HTML content with JavaScript

Can anyone provide guidance on how to switch HTML content using JavaScript? For example: if($sid == 0) {insert one HTML code} else {insert another HTML code} Which method is preferable - LESS, jQuery, CSS3, etc? ...

javascriptjqueryhtmlcss

javascript - determine whether a hyperlink has been accessed

Is there a method to determine if a link has been visited? In Firefox, the color of a link changes after clicking on it, which leads me to believe it is possible. Edit: This question pertains to a Firefox extension, so I am unable to modify the HTML or CS ...

javascriptcsshyperlink

Leveraging the power of PHP variables within jQuery code

Wondering how to incorporate a PHP value into jQuery? My approach involves retrieving the VAT rate from the database using PHP and storing it in $vatrate: $sqlv = <<<SQL SELECT * FROM `vatrate` WHERE id='1' SQL; if(!$resultv = $db-&g ...

phpjqueryhtmlvariables

Unable to alter the dimensions of the `symbol` element from an external SVG using CSS, although the other `symbol` within the same document is responsive to styling changes

Could someone help me find the bug in my code related to resizing SVG symbols with CSS? I am able to resize one <symbol> from an external SVG file, but not another <symbol> from the same file. In my CSS, I am trying to change the width and hei ...

htmlsvg

Combining data using D3's bar grouping feature

I'm currently exploring ways to group 2 bars together with some spacing between them using D3. Is there a method to achieve this within D3? I found inspiration from this example. var data = [4, 8, 15, 16, 23, 42]; var x = d3.scale.linear() .doma ...

javascriptcssd3.js

Angular Markdown Styling: A Guide

Currently, I am using Angular and Scully. I would like to add style to the image in a markdown file within Angular, but I am unsure of how to accomplish this task. The image is currently displaying too large. Can anyone provide me with useful advice on how ...

cssangularsassmarkdownscullyio

Bootstrap 4 Alpha Grid does not support aligning two tables side by side

When working with Bootstrap 4, I am aware that the .col-xs classes have been removed. Instead of using .col, I have tested it on Bootstrap 3.5 which is currently being utilized. <div class="col-xs-4"> Table content for left ...

csstwitter-bootstrapbootstrap-4