Center aligned columns on a small screen in Bootstrap by shifting them from left or right

My website has a header with a logo on the left and text on the right, but when the page gets smaller, the text overlaps with the logo. It doesn't look good at all.

Check out the Fiddle here 

<div class="container">
  <div class="row">
    <div class="col-xs-2">
      <img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
    </div>
    <div class="col-xs-10 text-right text-uppercase">
      <h1>Scooby Doo</h1>
      <h3>Where are you</h3>
    </div>
  </div>
</div>

I'm trying to figure out how to center everything on small screens and have the logo on top with text underneath. I've looked through Bootstrap documentation but can't find a solution using the grid system. Is there a way to do this with custom CSS and media queries?

htmltwitter-bootstrapcssalignment

Answer №1

To prevent overlap, you can utilize a mix of col-sm and col-xs classes.

Check out this Fiddle

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-2">
      <img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
    </div>
    <div class="col-xs-12 col-sm-10 text-right text-uppercase">
      <h1>Scooby Doo</h1>
      <h3>Where are you</h3>
    </div>
  </div>
</div>

If you need to align the text, consider using media queries like so: https://github.com/twbs/bootstrap/issues/11292

Alternatively, duplicating the block with hidden-xs and visible-xs classes is an option, but it may reduce maintainability. For a complete solution, see this Fiddle which provides the code below:

<div class="container">
  <!-- Hidden on XS screens, not centered -->
  <div class="row hidden-xs">
    <div class="col-sm-2">
      <img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
    </div>
    <div class="col-sm-10 text-right text-uppercase">
      <h1>Scooby Doo</h1>
      <h3>Where are you</h3>
    </div>
  </div>

  <!-- Only visible on XS screens, centered -->
  <div class="row visible-xs">
    <div class="col-xs-12 text-center">
      <img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
    </div>
    <div class="col-xs-12 text-center text-uppercase">
      <h1>Scooby Doo</h1>
      <h3>Where are you</h3>
    </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

Inject HTML entities, escaped for CSS, dynamically using JavaScript

My goal is to dynamically generate a list of HTMLElements with unique data-* attributes that correspond to various HTML Entities. These attributes will then be utilized by CSS to display content in pseudo elements like this: li:after { content: attr(dat ...

javascripthtmlcssfontsescaping

Variability of pixel dimensions on various devices

When it comes to front-end design in CSS, the use of pixels as a measurement is quite common. However, with varying display sizes and resolutions, one might wonder how relevant this fixed pixel size really is. Is there a way to utilize real-world measure ...

cssresponsive-design

Ensuring scroll position remains fixed post screen rotation in HTML/Javascript

Is there a foolproof method to retain the scroll position in an HTML document following a screen rotation? While this issue is specifically in a Cocoa Touch UIWebView, it seems to be prevalent across different platforms. The standard practice appears to re ...

javascripthtmluiwebview

Is there a way to extend this section to fill the entire screen height without any white space at the bottom?

We've been working on extending the content to the full height of the screen, but no matter what we try, there's always some white space lingering at the bottom. Any suggestions on how to fix this issue? section { height: 100vh; background ...

htmltwitter-bootstrapcssbootstrap-4

Material UI Card shadow effect getting cropped

Currently experiencing an uncommon issue while using Material UI's Card component - the box-shadow is cut off on the top and bottom sides. Any suggestions on how to resolve this problem? Check out my code below: import React, { Component } from & ...

javascriptcssmaterial-ui

What could be causing the a element tag to not affect the links? Is the syntax correct?

Why aren't my CSS properties affecting the links in my navigation bar? I want the styling to apply only to the links inside the #nav id, but it doesn't seem to be working. Can anyone help me figure out what the issue might be? CSS CODE: a#nav:l ...

htmlcssnavigation

What is the best way for a client to showcase a constantly fluctuating server-side variable's value?

On my website's homepage (index.html), I want to show a dynamic server-side global variable called serverVariable. This variable is always changing based on the node.js server-side code. However, since the client doesn't know what serverVariable ...

javascripthtmlnode.js

Issue encountered while transferring files between a web platform and an API

Currently, I am working on two separate projects. The first project involves a website where users can upload files, and the second project is an API designed for file uploads due to the limitations of the old website. I am utilizing Laravel (6) to develo ...

jqueryhtmlajaxlaravelpost

I cannot seem to get the image to display properly, it keeps getting cut off and

I am trying to add an image to my website: https://i.sstatic.net/giAdT.jpg However, when I try to do this, the full image is not showing: https://i.sstatic.net/VRBlB.png This is the code I am using: <!DOCTYPE html> <html lang="en"> ...

htmlcssbootstrap-4

Could this be the most straightforward and versatile method for vertically centering text inside a block element?

Discovering something new in the world of coding is always exciting: HTML: <div>Vertically Centered Text<span></span></div> CSS: div { height: 100px; /* adjust as needed */ } div > span { display: inline-block; v ...

csslayoutxhtmlhtml

Could someone please advise me on how to prevent the second animation from being overridden?

After attempting to separate the animations with a comma and placing them on the same transform, I am still encountering issues. * { margin: 0px; padding: 0px; box-sizing: border-box; } html, body { width: 100%; height: 100%; } .container { ...

htmlcssanimationcss-animationskeyframe

"Customize your Angular application by updating the background with a specified URL

Hello there, I've been attempting to modify the background URL once a button is clicked. In my CSS, I have the following default style set up. .whole-container { background: linear-gradient( rgba(0, 0, 0, 2.5), ...

htmlcssangular

I am experiencing some issues with my AngularJS JavaScript code. The root scope is updating correctly, but the other two scopes are not working as expected. Can

My attempt at writing AngularJS JavaScript code seems to be malfunctioning. While the root scope updates properly, the other two scopes FirstCtrl and SecondCtrl do not update as expected when the root scope is updated. I would like all three scopes to upd ...

javascripthtmlcssangularjs

Enhance your web form with the Bootstrap 4 tags input feature that allows users to add tags exclusively

I'm currently utilizing Bootstrap 4 along with Bootstrap Tags Input to create a multiple category selection feature. My goal is to enable users to choose multiple items exclusively from the predefined categories listed in the predefined_list. At pres ...

javascriptjqueryhtmlbootstrap-4bootstrap-tags-input

Tips for displaying HTML elements beyond the boundaries of an iframe

Similar Inquiry: How can content from an IFRAME overflow onto the parent frame? I am in search of a potential solution for the following issue: There is a specific element with the style "position: absolute" within a page loaded into an iframe. Based ...

htmlcssiframexhtml

Inserting Multiple Inputs

I have a unique application interface that is structured in the following manner: The rows within the application consist of either group headings (displayed as rows with single inputs) or ingredient forms (comprising a small input field, followed by a se ...

phphtmlmysqlforms

Adjust the size of the images in the Bootstrap navbar brand to make them resizable and move them

After some online research, I discovered a method to create a two-row Bootstrap navbar with the navbar-brand on its own row: <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBn ...

htmlcssbootstrap-4

Error in Angular: A ReferenceError has occurred stating that the bootstrap is not defined

I'm having trouble understanding why the error persists even though I've declared Bootstrap and confirmed it's defined when debugging. Does anyone have any insights on why this might be happening? Could it be related to Bootstrap? Here is t ...

angulartwitter-bootstrap

Ways to adjust the text size in jqGrid?

The current theme is ui-lightness. How can I adjust the font size within the grid? Your suggestions are appreciated. Many thanks. ...

javascriptjquerycssjquery-uijqgrid

Having trouble with HTML tags not parsing correctly in PHP?

Similar Question: Getting a parse error: syntax error, unexpected T_STRING 59 I'm working on displaying names from a database in a table format with checkboxes. Everything seems to be functioning correctly until I try to include the input tag wit ...

phphtmlmysql