Centrally aligning elements within a responsive row using Bootstrap's adaptive row class

I have a variety of elements on my page that need to be displayed in straight columns, with multiple images aligned horizontally and vertically. Each image has the same size and when clicked, an icon menu with three items appears in its place.

As the number of large images can vary (6, 7, 8 or more), I want to group them within one row-class.

Although I've followed bootstrap documentation, the logic of these elements on the page seems to be flawed.

What am I missing?

Here is a Codepen example

<body>
    <!-- HTML code snippet -->
</body>

I'm currently encountering issues regarding the layout as shown below:

Screenshot of my current result: https://i.sstatic.net/O4Y5N.png

Desired layout screenshot: https://i.sstatic.net/6gPXE.png

I would appreciate any guidance you could provide. Thank you for your help in advance. While I was able to achieve this without bootstrap, I believe utilizing bootstrap properly with the elements should enable me to maintain an adaptive layout.

Update: @LegendaryAks helped fix the gap issue by using 

<div class="clearfix"></div>
after the icons element, but centering all elements for an adaptive layout with an unknown total number of elements remains unresolved.

Update 2: Centering just one element at the end is not sufficient. We need a solution to center from one up to the maximum number of elements on the last row so that we can load all elements onto the page with no concerns about centering the last row.

htmltwitter-bootstrapcsstwitter-bootstrap-3

Answer №1

Success! It looks like the solution worked. Feel free to view the live demonstration here

To achieve this, I inserted a div with the clearfix class right after the fourth div. Hopefully, this is what you had in mind.

<div class="clearfix"></div>

Answer №2

Here is a CSS-only solution:

.center-block-big:nth-child(4n+1) {
  clear: left;
}
.center-block-big:last-child {
  margin: 0 auto;
  float: none;
}

In this example, I have removed the col-lg-2 class to apply it to all resolutions and edited the class name to only affect the container of the large images, not the Twitter ones.

Check out the updated CodePen demo.

If you want to maintain space on lg resolution, adjust the column width like this:

View the updated CodePen demo.

To center elements only if one element is on a row, use this dynamic approach:

.center-block-big:nth-child(4n+1) {
  clear: left;
}
.center-block-big:last-child:not(:nth-child(5n)) {
  margin: 0 auto;
  float: none;
}
.center-block-big:nth-child(4n+2),
.center-block-big:nth-child(4n+3),
.center-block-big:nth-child(4n) {
  float: left!important;
}

See the effect by adding .center-block-big elements in the updated CodePen demo.

Answer №3

Swap out col-md-6 with col-md-12 for the final element in your layout. Give this a try:

<div class="col-md-12 center-block text-center pagination-centered link">
    <a target="_blank" href="#">VK</a>
</div>

ALSO

<div class="col-md-12 center-block text-center pagination-centered link">
    <a target="_blank" href="#">FB</a>
</div>

To vertically align, create a new class as follows:

.verticalcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

and apply it. Organize your HTML structure like this:

First Row..
<div class="row center-block text-center">
    <div class="center-block col-md-4">
    </div>
    <div class="center-block col-md-4">
    </div>
    <div class="center-block col-md-4">
    </div>
</div>
Second Row..
<div class="row center-block text-center">
    <div class="center-block col-md-4">
    </div>
    <div class="center-block col-md-4">
    </div>
    <div class="center-block col-md-4">
    </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

Ways to soften a section of a canvas component?

What is the simplest way to apply a blur effect to a specific portion of my canvas element? I am utilizing the JavaScript 3D Library known as three.js. This library simplifies the use of WebGL. While they offer examples of blur and depth of field effects, ...

javascripthtmlthree.jshtml5-canvas

"Encountering a problem while trying to deliver the message to my email through the contact form

In order to create a contact us form, I have utilized an HTML file and a PHP file named sendemail.php. The sendemail.php file is comprised of header.html, footer.html, and contentsendemail.php where the code for sending information to my email is included. ...

phphtmlformsemailcontact-form

"Why does adding a new span create space between it and the previous ones, and what can be done to prevent this from

Essentially, it creates the equation "a + b = c". However, I need to create "a + b = c" instead. HTML: <div class="container"> <span id="b__value">+b</span> <span id="c__value">=c</span> &l ...

javascripthtmlcss

What are the negative effects of placing an external CSS stylesheet link outside of the <head>

At the outset, it is well-known that the <link> tag used to connect an external CSS style sheet should ideally be placed within the <head> section of an HTML document. It is considered unconventional to place it elsewhere. However, due to my u ...

csshtmldomhyperlink

Creating a basic tree structure menu on a webpage can be achieved using either PHP or HTML alone, no JavaScript

Looking to develop a basic tree menu using only PHP or HTML, without the use of any JavaScript. Constraints prevent me from including JavaScript in this project. ...

phphtmlcssmenu

What is the best way to align a div in the middle of an input-group div?

When dealing with a nested div, where the parent div is styled with an input-group class, my goal is to have the nested div centered within the available line or on the next free line space. This is the desired layout I want to achieve regardless of the n ...

htmlcssbootstrap-5

Modifying the appearance of select components in React MUI using CSS

Can someone help me modify the appearance of the react material UI select component to match this design: https://i.sstatic.net/EhcWR.png https://i.sstatic.net/L2te2.png I have already applied the following CSS styling: const styles = { width:&apos ...

cssreactjsmaterial-ui

The straightforward use of XMLHttpRequest to retrieve the response xhttp.responseText is not functioning properly

I am facing an issue where this.responseText is not returning the content of the file. Can someone assist me in solving this problem? Thank you. Console.log also does not return the content of the file. function loadMegaContent() { var xhttp = new XMLHtt ...

javascripthtmlajax

Modify the stroke attribute of the <path> element using CSS

I have a generated svg path code that I want to customize using CSS to remove the default stroke. How can I override the stroke property and set it to none? code: <div class="container" style="position: absolute; left: 3px; z-index: 1;"> <svg he ...

htmlcsssvg

Accessing Local Data with Local HTML on Android - Error: File Not Found

After organizing my project in a folder within the main root directory, I successfully created a basic hello world project. The HTML file displays perfectly in Chrome, but trying to load files from the main project folder or subfolders results in a net::ER ...

androidhtmlgoogle-chromeandroid-webview

What is the process for closing the lightbox?

My code is supposed to display a lightbox as soon as the page loads, similar to a popup window. However, there seems to be an issue with closing the lightbox when clicking on the 'x' button at the corner of the box. Unfortunately, the current cod ...

javascripthtmlcsslightbox

The select dropdown default choice is not appearing as expected

My template is not showing the default select option that I have set for one select element. I attempted to achieve this with the following code: <div class="select"> <select (change)="calculaMes(mesEscolhido)" [(ngModel)]="mesEscolhido" na ...

htmlcssangular

Transfer text with style from a JTextPane to Microsoft Word

I'm trying to transfer styled text from a JTextPane to Microsoft Word. My current code gets the job done, but it struggles with accented characters: Clipboard clp = Toolkit.getDefaultToolkit().getSystemClipboard(); ByteArrayOutputStream ot = n ...

javahtmlswingms-wordclipboard

What is the best way to make a multi-column image responsive in amp-html code?

Here is the concept I was referring to, you can see it in action by following this link <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-bo ...

htmlcssamp-htmlresponsive-images

Reducing the size of the website does not necessarily mean the body will be at 100% width

While inspecting the site, I noticed that the body does not extend to 100% width of the screen when I reduce the size of the site. After removing the Bootstrap classes, the issue seems to be resolved. I even tried adding body{width: 100%} but it did not h ...

htmlcssbootstrap-5

Enhancing Responsive Design with Bootstrap 5: Using Different Alignments for Div Elements on Desktop

I have a unique layout design challenge for my bootstrap 5 website template. On desktop, I want to display divs in the following order: 1st line of divs: image, text 2nd line of divs: text, image https://i.sstatic.net/cXZVU.png When it comes to mobile ...

htmlalignmentbootstrap-5

Angular Material: div not being filled by layout-fill

<!-- Container Div --> <div layout-fill> <!-- Image Div --> <div layout="column" layout-align="center center" class="coverImage" layout-fill> <md-content class="md-padding"> Sample Text Here ...

javascriptcssangularjsflexboxmaterial-design

What are some techniques for applying CSS styling directly to a custom element?

Check out this amazing resource from HTML5 Rocks about the process of creating custom elements and styling them. To create a custom element, you can use the following code: var XFoo = document.registerElement('x-foo', { prototype: Object.crea ...

javascriptcsshtml

Can you explain the distinction between Declared Values and Specified Values?

I found myself confused by the distinction between Declared Values and Specified Values. Initially, I believed that the Declared Values were set by the author. These values then filter down to a single value, known as the "winning value", which becomes t ...

css

techniques for accessing HTML source code through an AJAX call

I am trying to retrieve the HTML source of a specific URL using an AJAX call, Here is what I have so far: url: "http://google.com", type: "GET", dataType: "jsonp", context: document.doctype }).done(function ...

javascriptjqueryhtmlajax