Tips for maintaining centered collapsed Bootstrap columns

I have been working on a way to ensure that my Bootstrap columns stay centered even when the screen size is reduced and the columns wrap around.

This is what my code currently looks like:

    <div class="container">       
         <div class="row">
            <div class="col-md-2">    
            </div>
            <div class="col-md-8 text-center">
            <div style="font-size:36px;">Page Title</div> 
            </div>
            <div class="col-md-2">          
            </div>
        </div>  
        
        <div class="row text-center">
            <div class="col-md-2">    
            </div>
            <div class="col-md-2">
                 <div class="text-left" style="float:left;width:25%;">WWW</div>  
            </div>
            <div class="col-md-2">
                 <div class="text-left" style="float:left;width:25%;">XXX</div>  
            </div>
            <div class="col-md-2">
                 <div class="text-left" style="float:left;width:25%;">YYY</div>  
            </div>
            <div class="col-md-2">
                 <div class="text-left" style="float:left;width:25%;">ZZZ</div>  
            </div>
            <div class="col-md-2">         
            </div>
        </div> 
      </div>

In my current code, the 'Page Title' text remains horizontally centered on the screen when the width is reduced. However, I am facing an issue where the four columns do not stay centered when wrapped into two or one column in col-md-8. Is there a way to keep the col-md-2 columns centered horizontally regardless of how they are wrapped?

htmlcsstwitter-bootstrap

Answer №1

The content is aligned to the left within the container div using the class text-left. To center it, you can utilize the Bootstrap class text-center.

Furthermore, regarding your column structure, it appears that inline widths are conflicting with Bootstrap styles. It may be beneficial to remove them and implement Bootstrap's predefined classes like so:

<div class="container">       
     <div class="row">
        <div class="col-md-2">    
        </div>
        <div class="col-md-8 text-center">
            <div style="font-size:36px;">Page Title</div> 
        </div>
        <div class="col-md-2">          
        </div>
    </div>  

    <div class="row text-center">
        <div class="col-xs-12 col-sm-6 col-md-2 text-center">???    
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">WWW</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">XXX</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">YYY</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">ZZZ</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2 text-center">???         
        </div>
    </div> 
  </div>

This approach will create full-width columns on each div at the "xs" size (extra small or mobile), then expand to 50% at the "sm" size (small), and finally reduce to 1/6th at the md (medium) size.

For additional guidance, you can refer to this bootply link: http://www.bootply.com/t9XqPsBOpB

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

Internet Explorer captures XML response

Currently, I am working with a form that has an iframe specified as its target. As part of the form submission process, I receive a response in XML format and have Javascript code to analyze this response. An issue I encountered is that when using IE, th ...

javascripthtmlxmlinternet-explorerrss

What is causing the container to overlap with my sidebar-like <nav>?

Why is the fluid-container overlapping in this way, while others are not? Does this look correct to you, or am I overlooking something? It seems incorrect to me. <nav class="nav flex-column float-left"> {links} </nav> <div class="conta ...

htmlcsstwitter-bootstrapbootstrap-4

What are the steps to utilizing mattooltip effectively?

Can someone help me figure out how to successfully implement mattooltip in this code? It's not working as expected. <div class="btn-edit-nounderline" matTooltipClass="custom-tooltip" (click)="edit(row.widgetAccess)" ...

htmlangulartypescript

Background image investigation

As a newcomer to web development, I am facing challenges in achieving the desired look for my first website. Despite spending over 2 hours researching and testing various CSS properties, I have not made much progress. What I aim for is quite straightforwa ...

htmlcss

Adjust the size of a nested div within a bootstrap container

My dilemma arises when nesting a product slider div inside a bootstrap col-lg-x div, as illustrated below: https://i.sstatic.net/9tCVA.png The issue lies in the layout distortion that occurs within a div.row > div.col-lg-8 structure, where images are ...

htmlcsstwitter-bootstrapmedia-queries

Ways to display or conceal a moving svg based on the current tab selection

Below is the fiddle and snippet: https://jsfiddle.net/e130kr2x/ I've successfully achieved animating the SVG when a tab is active, but I'm facing difficulty in making it not display or fade out when opening a new tab. The new tab should activate ...

htmlcsssvgtabs

Arranging Columns in Bootstrap 4.0

I am attempting to create a layout using Bootstrap 4 that consists of two larger columns on the left and four smaller columns grouped together on the right, with the height of the four columns not exceeding the height of the two larger columns. However, I ...

htmlcssflexboxbootstrap-4multiple-columns

Positioning a table within a div using HTML and CSS

I've got a working example that needs just a little tweaking: In this setup, you'll find two center-aligned tables with a list of vertical buttons below, left-aligned. The challenge is making sure the tables are equally aligned at the top inste ...

htmlcss

Remove elements generated by the .after method with Jquery

In my HTML file, I have a table with hard-coded column headers: <table id="debugger-table"> <tr> <th>Attribute</th> <th>Computed</th> <th>Correct</th> </tr> </table&g ...

javascripthtmljquery

Can you share the outcomes of executing a Node.js program in real-time?

Is there a method to execute a program (such as tcpdump) and have nodejs capture the console output in real-time to display in an HTML format without saving it? I am interested in running a program that displays information in the console, with the capabi ...

javascripthtmlnode.jsbashshell

Quick trick to strip decimal points from prices with jquery

Is there a way to remove the decimal point from the price on my website? This is what my HTML looks like: <span id="product-price-4432" data-price-amount="399" data-price-type="finalPrice" class="price-wrapper " itemprop="price"> <span class="p ...

jqueryhtmlrounding

The page does not respond to scrolling

I am currently modifying a Wordpress theme and I am looking to increase the size of the main content area. However, when I exceed the screen limits, the content does not scroll. I have identified that the issue is commonly caused by the position: fixed pro ...

javascripthtmlcss

Elevate the placeholder in Angular Material 2 to enhance its height

I want to make material 2 input control larger by adjusting the height property of the input using CSS <input mdInput placeholder="Favorite food" class="search-grid-input"> .search-grid-input { height:30px!important; } As a result, the image o ...

cssangularangular-material2

Display loader until the document body has finished loading

Many developers have shared solutions for displaying a loader while an element is being loaded. However, my challenge is unique. I want to display a loader before the document body is fully loaded. The issue arises from an AJAX call in my code: var url = ...

javascripthtmlajaxdom

Safari fails to refresh CSS when it comes to dynamic attributes

Take a look at this simple demonstration: http://jsfiddle.net/fE8ry/ I am attempting to modify the attribute of a div, and based on the attribute's value, apply the corresponding CSS. When the page loads, the attribute selector functions correctly a ...

csssafari

Locating the top 3 largest values in an HTML data table and highlighting them in red

Issue Description: I am working with data that displays the electricity consumption of different buildings in HTML tables. There is a possibility that these tables may contain duplicate values. With the use of jQuery, I am seeking a method to identify an ...

javascriptjqueryhtmlarrays

Using PHP to programmatically declare and initialize variables

Is there a more efficient way to handle this task that I may not be aware of? Currently, I am submitting a form to a page that will take the information and store it in a MYSQL database. My current process involves declaring variables and setting their val ...

phphtmlmysqlforms

Creating an HTML Page and Hosting it on a Server

Currently, I am in the process of learning how to set up an HTML page on a server. Although I have managed to do so, the problem is that an index page appears by default. I do not want this page to show; rather, I would prefer my home page to be visible. Y ...

htmlcssweb-hostingfile-management

Consistent word spacing across several lines

Can someone help me with an issue I'm facing? It seems simple, but I can't seem to figure it out. I am looking for a way to maintain consistent spacing between words on multiple lines without using tables. Essentially, I want something like invi ...

htmlcss

How to align Vimeo embed to the left side

Is there a way to align a Vimeo iFrame to the left instead of it automatically centering itself? I want more control over its alignment within my flexbox container. I've created a Flexbox container named .example-div with two internal flex containers ...

htmlcssalignmentvimeovimeo-player