How to centrally align header elements in Bootstrap 4 on mobile devices?

In this setup using Bootstrap 4, I have a header structure as follows:

<div class="container">
<div class="row">
<div class="col-md-6">
  <div class="navbar-brand"><img src="..."></div>
</div>
<div class="col-md-6 text-right">
  <div class="header-btn-grp">
  <div class="header-call-us">Get a Quote, Call Today!</div>
  <a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
  <div class="header-address">XXX</div>
</div>
</div>
</div>

On desktop view, the logo is on the left and the button is on the right as anticipated.

For smaller devices, I aim to center align both the logo and button.

I attempted to apply a .text-md-center class to the columns, but this centered both elements in their columns across all screen widths (desktop and mobile).

What is the proper way to achieve this layout adjustment?

csstwitter-bootstrapbootstrap-4

Answer №1

Instead of @cwanjt's solution, you can also utilize the text-center class. By incorporating text-md-left and text-md-right, you can maintain the preferred alignment on larger screen widths.

<div class="container">
    <div class="row">
        <div class="col-md-6 text-md-left text-center">
            <div class="navbar-brand"><img src="//placehold.it/140x30"></div>
        </div>
        <div class="col-md-6 text-md-right text-center">
            <div class="header-btn-grp">
                <div class="header-call-us">Get a Quote, Call Today!</div>
                <a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
                <div class="header-address">XXX</div>
            </div>
        </div>
    </div>
</div>

Answer №2

Hello @TimothyAURA, it seems like you're looking for a way to center the content of your header on smaller screens. You can check out the code in this example project to see how it's done. If you're familiar with Bootstrap, you can also refer to Bootstrap's utilities for flex options.

The code snippet uses a justify-content-center class for medium-sized devices and below, and justify-content-lg-between for larger displays.

<header class="d-flex justify-content-center justify-content-lg-between">
    <a class="navbar-brand" href="#">
        <img src="http://example.com/image" alt="">
    </a>
    <div class="header-btn-grp">
        <div class="header-call-us">Get a Quote, Call Today!</div>
        <a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
        <div class="header-address">XXX</div>
    </div>
</header>

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

Tips for evaluating style modifications on mouseover using cypress

Trying to test hover styles on table rows but encountering issues: Here is the code snippet I am testing: it("Table rows should display correct hover styles", () => { cy.get("table>tbody>tr").each(($el, index, $list) =&g ...

htmlcsscypresse2e-testing

Exploring MaterialUI withStyles to customize disabled switches with a CSS override

As I work on my project using React and MaterialUI, I've encountered a problem with customizing inputs. Despite trying various selectors, I can't seem to change the black color of this particular input. It would be helpful to have a clearer way o ...

cssreactjsmaterial-uimaterial-designreact-with-styles

The div height set to 100% and using display:flex is experiencing issues in Chrome

Bootstrap 3.0 is utilized in the design. My goal is to have uniform height for all boxes, with the "more" link on the right box positioned correctly. However, the box ends before reaching the more link. Take a look at this JSFiddle example. Here is the H ...

htmlcsstwitter-bootstrapflexbox

What CSS selector should I apply to create a circular profile image for Buddypress users?

In my current WordPress project, I am utilizing the BuddyPress, WooCommerce, and WC Vendors plugins for enhanced functionality. To personalize each vendor's product listings, I decided to display their BuddyPress profile picture alongside their produ ...

csswordpresswordpress-themingbuddypress

Increase transparency of scrollbar background

Is it possible to adjust the opacity of a scrollbar track? I attempted to use opacity:0.5, but it didn't have any effect. I am using material UI styled, although I don't believe that is causing the issue. const Root = styled('div')(({ ...

cssmaterial-ui

AngularJS feature that enables resizing modal popup dimensions through a modal service

Currently working on an AngularJS application and in need of opening a specific modal popup with larger dimensions. Are there any AngularJS libraries available that cater to customizing modal popups? Explored AngularStrap (http://mgcrea.github.io/angular-s ...

cssangularjstwitter-bootstrapangular-uiangular-ui-bootstrap

Creating a flexible grid layout in CSS without relying on any pre-made frameworks

Suppose I am working with the following HTML structure <div class="option"> <input type="checkbox" /> <label>Checkbox</label> </div> <div class="option"> <input type="checkbox" /> <label>Chec ...

htmlcss

What is the best way to create a seamless transition for background-image animations

I have a div where I am applying a class that alters the background image: $('div').addClass('specialBackground'); However, the transition between the background images is too abrupt. I want to achieve a smooth fade effect between the ...

jquerycssbackground-image

Embed a video onto a webpage using HTML and ensure it is responsive by implementing Bootstrap's grid

I am currently using the mPurpose-master bootstrap theme, which offers a feature allowing the placement of 3 blocks in a row that are fully responsive. <div class="section"> <div class="container"> <div class="row"> ...

csshtmltwitter-bootstrapvideo

Internet Explorer 7 does not display icons

When I look at my icon, I'm calling it like this: <td> <i id="sthAdd" class="icn_plus"></i> </td> and the class looks like this: .icn_plus { background: url(../images/icons/plus-14x14.png) no-repeat; width: 20px; heig ...

htmlcssinternet-explorer

Refreshing data in a Bootstrap modal

I am having trouble passing data from a Bootstrap modal to the ul element. Although I can add multiple li elements, only the first one is displayed and it does not change. Can anyone offer assistance with this issue? <ul id="myList"> </ul> ...

jquerybootstrap-4

Box-free calendar dash component

Encountering an issue within my application dashboard, here's a direct screenshot: https://i.stack.imgur.com/sEMrM.png The problem is that the Calendar days are extending beyond the borders of the calendar box. To implement this, I simply utilized ...

pythonhtmlcssplotly-dash

Enclose an image with a <div> element while maintaining the <div> height at

Encountering a challenge where positioning an element on top of an image at specific coordinates (20% from the top and 30% from the left) is required. Initially, the solution involved wrapping the image in a div with a relative position and using absolute ...

javascriptjqueryhtmlcss

The line breaks in elements occur when the combined widths add up to 100%

Is there a way to display an input and a button inline, with the input taking up 70% of the row and the button taking up 30%? I tried setting the CSS for the input to 70% and the button to 30%, but they keep breaking onto separate lines. How can I solve ...

css

Performing height calculations in JavaScript is necessary to recalculate them whenever there is a

A JavaScript function is used to calculate the height of an iframe element and the document height, then determine if the iframe is on or off based on its height and display properties. The issue arises when changing pages— if the height is less than the ...

javascriptjqueryhtmlcss

The CSS display:block property isn't functioning as intended

I'm currently working on a contact form using CSS and HTML, but I'm having trouble getting the boxes to display properly in a 'block' form (display:block). HTML: <section class="body"> <form method="post" action="index.php ...

htmlcss

Creating a Full-Width Dropdown in Bootstrap 4 Navbar: A Step-by-Step Guide

I'm attempting to create a dropdown that spans the full width of the screen and has a collapsible feature like many modern websites. However, I am having difficulty figuring out how to achieve this. I experimented with using Bootstrap's collapse ...

csstwitter-bootstrapbootstrap-4navbar

Looking to reduce the size of a logo image within a container as you scroll down a webpage?

I've been working on creating a logo section for my website, but I'm struggling to make it shrink as users scroll down and expand back to its original size when they scroll up. I've tried various JavaScript and jQuery functions without succe ...

javascriptjqueryhtmlcssimage-resizing

What is the best way to modify a Bootstrap class' SASS attribute within a React component?

Just to clarify, I am utilizing react-bootstrap and attempting to incorporate bootstrap. Here is the code I have: import React from 'react' // bootstrap import { Button } from 'react-bootstrap'; const MainDisplay = () => { return ...

htmlcssreactjssass

After deploying DRF, the CSS in Django admin is not displaying

After developing a web application using Django Rest Framework and React, I faced an issue during deployment on IIS. While the deployment is successful, I encountered a problem with the Django Admin where the styles were not displaying properly. This led t ...

cssiisdeploymentdjango-rest-frameworkdjango-admin