Centralize the content within a row in Bootstrap when the specified breakpoint is reached

Having a grid system in bootstrap v4 like this:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-auto align-self-center">
            <img src="test" class="logo img-responsive">
        </div>
        <div class="col-sm-auto align-self-center">
            <table class="table-responsive">
                <tbody>
                    <tr><td></td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

The desired layout should have the image and table side-by-side for screens larger than 'small' size, and stack them for smaller screens. The current setup accomplishes this effectively.

However, I am facing an issue with alignment. I want the row to be left justified when the columns are side-by-side (screen > "small"), but centered when stacked (screen < "small").

I attempted to use justify-content-center on the row, but it ends up centering both configurations instead of just one. This creates a problem where all elements are left-justified until the screen reaches extra small, at which point they once again shift to left justification...

A demo illustrating the issue can be found here: https://jsfiddle.net/aq9Laaew/133123/

cssbootstrap-4

Answer №1

One issue with using col-sm-auto is that the columns expand to full width on small screens, causing the table to also span the entire width and lose its center alignment.

Instead, try using col-auto col-sm mx-auto for the second column so it can adjust to the table's width on smaller screens...

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-auto text-center">
            <img src="//gradientjoy.com/300x200" class="logo img-fluid">
        </div>
        <div class="col-auto col-sm mx-auto">
            <table class="table-responsive">
                <tbody>
                    <tr><td>test</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer №2

To achieve automatic margin on the x-axis, consider utilizing either .mx-lg-auto or .mx-md-auto classes (based on your desired breakpoint).

For further information, refer to the documentation.

Answer №3

To adjust the margins on specific screen sizes, consider utilizing the ml-lg-0 mr-lg-0 classes (replace 'lg' with your desired screen size for left justification to start). This allows you to center content with mx-auto on small screens but switch to left justification once the viewport reaches a certain width.

Answer №4

    .row {
      background: #f8f9fa;
      margin-top: 20px;
    }
    
    .col {
      border: solid 1px #6c757d;
      padding: 10px;
    }
    tbody {
      display:inline;
      width:100%;
    }
    @media only screen and (max-width: 768px) {
        .row, table {
            text-align:center;
        }
    } 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-sm-auto align-self-center">
                <img src="test" class="logo img-responsive">
            </div>
            <div class="col-sm-auto align-self-center">
                <table class="table-responsive">
                    <tbody>
                        <tr><td>test</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

Give this code a try...Included additional styles in the code block below,

tbody {
  display:inline;
  width:100%;
}
@media only screen and (max-width: 768px) {
    .row, table {
        text-align:center;
    }
}

Link to JSFiddle for live demo.

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

Dynamic resizing container

For most of my websites, I typically place content within a div that features rounded corners with a shadow effect. Recently, I've been trying to figure out if it's possible for this parent div to automatically center both vertically and horizont ...

htmlcss

Setting a CSS style for an ASP.NET button: What you need to know!

I am facing an issue with the styling of my asp:Button. I have applied CSS styles using the cssClass property, but they are not being applied correctly. Surprisingly, when I switch to using asp:LinkButton, the styles work perfectly fine. I prefer not to us ...

asp.netcssbuttonaspbutton

Is there a way to eliminate the directional tag from the base css by utilizing a separate css file?

css, body, forms { text-align: right; } I need to remove this part of the code because it is causing alignment issues with my slider in IE7. ...

css

Prevent Angular Material Menu from displaying URL link unless actively hovering over a menu item

Is there a way to utilize <a> tags as menu items in order to display the URL link at the bottom left corner of the browser only when hovering over the menu item? (This behavior may vary across browsers, but Chrome seems to exhibit it). It appears th ...

htmlcssangularangular-material

I am unable to make any changes to the .navbar and #navbar elements using CSS

I'm having trouble customizing the navigation bar using .navbar and #navbar in CSS. I was hoping to make changes to the Bootstrap navbar, but nothing seems to be working. I'm not sure if it's an issue with the HTML or CSS. I've include ...

htmlcssbootstrap-5

Automatically select and pre-fill a list item based on its value using jQuery

I'm a beginner in JQuery. In my application I have the following: Here is my HTML code: <ul id="list"> <li> <a class="selected" value="0" href="#" id="sel">ALL</a> </li> <li> <a hre ...

javascriptjqueryhtmlcssjquery-ui

Cannot utilize the "classname" table while working with Bootstrap or React Bootstrap in ReactJs

I am trying to integrate the react-bootstrap theme into my ReactJs-Spring project. Following the tutorial on the website, I have added the necessary resources: <script src="https://unpkg.com/react@latest/dist/react.js"></script> <script sr ...

reactjsspring-bootbootstrap-4

How can I transfer a particular data value from a div to JavaScript within Laravel 5.0?

Displaying separate square divs based on integers retrieved from the database. This is the front-end view. I want to pass the room ID (code) to a JavaScript function when clicking on these div elements. https://i.stack.imgur.com/aIYTr.png Below is my cur ...

javascriptphpjqueryhtmlcss

The concept of CSS div wrapping and managing vertical whitespace in web design

My goal is to make multiple div elements wrap to the next line when the width of their container is changed. The wrapping part is working fine, as the boxes drop to the next line when there isn't enough width for them to fit. However, I am facing an i ...

jquerycsshtml

Establish the default bootstrap theme mode specifically for print formatting

Customizing the theme in Bootstrap is made easy by setting the data-bs-theme attribute on the body or parent element. While this feature is useful, we discovered that printing in light mode produces the best results. Instead of creating an entire set of st ...

javascriptcssbootstrap-5

Unable to locate image files stored in vendor/images in the Rails 4 view

I have successfully set up a custom bootstrap theme with Rails 4, and placed the image file here: /vendor/assets/images/custom_bootstrap_theme/demo/bg01.jpg The index.html.erb file is referencing this image as follows: <img src="/vendor/assets/image ...

cssruby-on-rails

disabling responsiveness in Bootstrap 2

I am facing an issue with Bootstrap version 2 where I am unable to fix the grid layout. Even after wrapping all my HTML elements in a container, the layout still behaves unpredictably on different screen sizes. Here is a snippet of my code: <header> ...

htmlcsstwitter-bootstrap

When using jQuery, the onChange() function can be used to switch focus

Make sure to check out this fiddle first: http://jsfiddle.net/7Prys/ I am looking for a way to automatically focus on the next input field when a user enters a value in the previous field. This should happen until the fourth input field. Is there a simple ...

jqueryhtmlcss

Using CSS to place my logo within the navigation bar

Currently, I am struggling to find tutorials that can assist me in aligning the responsive navigation bar with the logo. As a newcomer to HTML & CSS and website creation, I would greatly appreciate any guidance on positioning it correctly. Additionally, co ...

htmlcssnavigationbar

Tips on incorporating inline CSS within master pages

I am facing a dilemma with my master page that includes an external CSS file in the header. While most of the pages have the same height, only one page needs to be longer. Instead of creating a new master page or modifying the existing CSS file entirely, ...

htmlasp.netcssmaster-pages

sIFR version 3.6 - Hyperlink not functioning in Opera browser - appearing as plain text in Internet Explorer

I am experiencing a challenge with sIFR in Opera and IE. In Opera, the link is not functioning properly, while in Internet Explorer sIFR does not appear at all, displaying only regular text. This issue does not occur in either Firefox or Google Chrome. W ...

csssifr

Steps to ensure that a particular tab is opened when the button is clicked from a different page

When I have 3 tabs on the register.html page, and try to click a button from index.html, I want the respective tab to be displayed. Register.html <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist"> <l ...

javascripthtmljquerycssbootstrap-4

How can you ensure that divs stay the same size and appear next to each other without resorting to using

I need assistance with organizing my website layout as shown below: https://i.sstatic.net/Dpof9.png The image div will display an image of variable size, which needs to be vertically and horizontally centered. The text div will contain a large amount of ...

htmlcss

JQuery preventing the opening of a Bootstrap modal window

Having multiple modal windows in a CodeIgniter view and facing issues while trying to open them using JQuery. Attempted using .modal('toggle') and .modal('show') but failed. Interestingly, using a button with data-toggle and data-target ...

jquerybootstrap-4bootstrap-modal

Fixed position of the element within a parent stacking context

How can I ensure that the #icon appears below the #dropdown in the following example? https://i.stack.imgur.com/GoBcR.png The position: fixed of #container seems to be creating a new stacking context for its children. Changing the position value fixes th ...

htmlcss