How to center two divs side by side horizontally using Bootstrap

How can I make the layout work on screens 575px and below with the class "col-xs-6 col-sm-6 col-md-8"?

<div class="container">
                    <div class="row align-items-center">
                        <div class="col-xs-6 col-sm-6 col-md-8">
                            <!-- Top Contact -->
                            <div class="top-contact">
                                <div class="single-contact"><i class="fas fa-phone-alt"></i>Phone: 1800 123 4567</div> 
                                <div class="single-contact d-none d-lg-inline-block"><i class="fa fa-envelope-open"></i><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe97909891be9b939f9792d09d9193">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4cdcac2cbe4c1c9c5cdc88ac7cbc9">[email protected]</a></a></div>    
                                <!-- <div class="single-contact"><i class="fa fa-clock-o"></i>Opening: 09AM - 06PM</div>  -->
                            </div>
                            <!-- End Top Contact -->
                        </div>  
                        <div class="col-xs-6 col-sm-6 col-md-4">
                            <div class="topbar-right">
                                <!-- Social Icons -->
                                <ul class="social-icons">
                                    <li><a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></li>
                                    <li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
                                </ul>                                                           
                                <div class="button">
                                    <a href="contact.php" class="pixcorp-btn">Get a Quote</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

The screenshot of the issue can be found at this link:

https://i.sstatic.net/r5UZ6.jpg

htmlcssbootstrap-4

Answer №1

.col-xs- is not a valid Bootstrap 4 column class.

Bootstrap 3 .col-xs- is a legitimate class. This may be causing some confusion for you.

In Bootstrap 4, simply use .col- for your smallest or initial screen size column class.

<div class="container">
  <div class="row align-items-center">
    <div class="col-6 col-sm-6 col-md-8">
      <!-- Top Contact -->
      <div class="top-contact">
        <div class="single-contact"><i class="fas fa-phone-alt"></i>Phone: 1800 123 4567</div>
        <div class="single-contact d-none d-lg-inline-block"><i class="fa fa-envelope-open"></i><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86efe8e0e9c6e3ebe7efeaa8e5e9eb">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="660f08000926030b070f0a4805090b">[email protected]</a></a></div>
        <!-- <div class="single-contact"><i class="fa fa-clock-o"></i>Opening: 09AM - 06PM</div>  -->
      </div>
      <!-- End Top Contact -->
    </div>
    <div class="col-6 col-sm-6 col-md-4">
      <div class="topbar-right">
        <!-- Social Icons -->
        <div class="button">
          <a href="contact.php" class="pixcorp-btn">Get a Quote</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76141919020502041706364258435845">[email protected]</a>/dist/css/bootstrap.min.css">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f6d60607b7c7b7d6e7f4f3b213a213c">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

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

Is there a way to access the font characteristics of a website?

I'm currently in the process of customizing my WordPress theme and I'm looking to adjust the font sizes for certain elements such as pagination. However, I'm finding the style.css file to be quite convoluted and I'm having trouble ident ...

csswordpress

Make the table width 100%, but we don't want the central cell to be stretched

My table contains a central image cell that spans two rows: <table width="100%" style="text-align:center"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td rowspan="2"><img src="http://www.skrenta.com/ima ...

htmlcss

A handy hack for eluding XSS attacks

Recently, I found out that my html/php website is susceptible to XSS attacks. Is there a method to clean my data other than having to manually include `htmlspecialchars` for every variable sent to the webpage (there's a chance of missing some and stil ...

phphtmlxss

Loading dynamic fonts in React MaterialUI

In our web application, each user experiences a unique style with colors, fonts, border widths, and more based on the Material UI JSON theme retrieved from the database upon loading the app. The challenge lies in handling dynamic fonts. What approaches ha ...

cssreactjsfontsmaterial-uidynamic-content

angular 2 checkbox for selecting multiple items at once

Issue I have been searching for solutions to my problem with no luck. I have a table containing multiple rows, each row having a checkbox. I am trying to implement a "select all" and "deselect all" functionality for these checkboxes. Below is an example o ...

javascripthtmlangulartypescript

Discover the process of retrieving an element by its ID when dealing with dynamically generated IDs in AngularJS

I am creating a list using the following code snippet: <div ng-repeat="list in fileUploadList"> <div id="{{list}}Upload"></div> </div> Within the controller, I need to retrieve the element by ID, so I am utilizing this line of ...

javascriptangularjshtml

Issues with the Textarea StartsWith Function Being Unresponsive

Attempting to use the startsWith function on a textarea, but it seems like there may be an error in my code. Since I am not well-versed in Javascript, please forgive any obvious mistakes. I did try to implement what made sense to me... View the Fiddle here ...

javascriptjqueryhtmltextareastartswith

Changing HTML with defined PHP boundaries

I have a basic HTML wrapper and a PHP function that reads data from a file, splitting it into div tags for things like comments or forum posts. The text file is divided by delimiters to indicate the start of each section. The script correctly increments a ...

phphtmlloopsfile-io

Showcasing distinct signs in a Span within reactJS is simple by utilizing the appropriate syntax

In ReactJS, I am trying to display the following special characters within a span: <span class='child tm'> <img src={tick} class='tick'/>A special character !"#$%&'()*+,-./:;<>=?@[\]^_`|{}~ </span ...

htmlreactjs

Fluid Grid System with columns of specific dimensions

Recently delving into the world of Foundation Framework, I've just begun utilizing it for my projects. My current task involves crafting a responsive design with the help of the Foundation Grid system. Specifically, I've set up a grid layout for ...

javascriptcssgridresponsive-designzurb-foundation

Is it feasible to implement the Bootstrap GRID System?

Hello there! I am currently exploring a potential scenario. When viewing on a desktop or laptop, the layout should look like this: <div class="col-md-3"> sidebar </div> <div class="col-md-9"> article </div> On a smaller screen, ...

htmlcsstwitter-bootstrap

Shiny Chrome, Flexible Flexbox, and plump div elements

Looking to enhance my understanding of flexbox. Encountering a display issue in Chrome where the right column is too wide and the left column is too skinny, while it displays correctly in Firefox. Any suggestions on how to fix this for Chrome? .child ...

htmlcssgoogle-chromeflexbox

Dealing with rowspan and colspan issues in Internet Explorer

Currently, I am facing the challenge of creating a table with a complex system of colspans and rowspans. If you want to take a look at it, you can view it here This is the HTML code for the table: <table cellspacing="0" cellpadding="0" style="table-la ...

cssinternet-explorerhtml-tableinternet-explorer-11

Loop through each JSON object and insert it into an HTML element

I am working on looping through a JSON object and converting it into HTML. While I can iterate through all the objects in the JSON, I am having trouble extracting just the first object. var res = '[{"ID":"246","mobile":"samsung","feedback":"feedback ...

javascriptjqueryhtmljson

Is there a way to extract the text from the inner div of an element using nightwatch.js?

I'm attempting to retrieve the content of a cell within a table, with the following CSS structure: <div data-testid="cellvalue_row-1_col-0" class="Table-cellContent" xpath="1"><span data-testid="tableCellCon ...

javascripthtmlcssnightwatch.js

Is It Possible to Create Flash Content Without Using a SWF File?

Is there a way to embed Flash directly in HTML, rather than linking to an external SWF file? I am looking to send an HTML form via email for the recipient to fill out by opening it in a browser. The final step would involve copying the result to their clip ...

javascripthtmlflashemail

Retrieve information from a span element located within a div container

Being new to web scraping, I am encountering what may seem like a trivial issue. Below is the HTML code in question: <div class="price-container clearfix"> <span class="sale-flag-percent">-40%</span> <span class="price-box ri"> ...

pythonhtmlcssbeautifulsoup

Initiate the transmission of numerous files immediately following a specified URL

It's interesting how websites like Facebook are able to directly send their .js and .css files when you visit the site. Most "normal" sites typically send back the index.html or index.php first, followed by the necessary .js and .css files later on. ...

phphtml

Problem with HTML relative paths when linking script sources

Having trouble with a website I constructed using Angular. The problem lies in the references to javascript files in index.html. The issue is that the paths in the HTML are relative to the file, but the browser is searching for the files in the root direct ...

javascripthtml

The vertical-align property fails to properly align the list-style-image with the text

My HTML list is structured like this: <ul id="remove"> <li id="rm_txt_1" onClick="remove_1();">Remove </li> </ul> <ul id="move"> <li id="mv_txt_1" onClick="position();">Move Down</li> </ul> It is styled u ...

htmlcss