Unable to align images in a single row using Bootstrap framework

I am just beginning to explore bootstrap and currently working on a website using it. I need assistance in aligning small images in a single row for the mobile view. The code I have been using is as follows:

<div class="mobile">
    <div class="container">
        <div class="row">
            <div class="col-sm-1 col-xs-1">
                <a href="shop"><img src="assets/img/icon/birthday.png" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p></a>
            </div>   
            <div class="col-sm-1 col-xs-1">
                <a href="shop"><img src="assets/img/icon/birthday.png" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p></a>
            </div>  
        </div>
    </div>
</div>

However, the current result appears stacked instead of side by side as I intended. You can see the outcome here.

If anyone could offer guidance on achieving the desired alignment for the images, that would be greatly appreciated.

Thank you in advance

htmlcsstwitter-bootstrap

Answer №1

col-sm-1 is too narrow and does not adequately accommodate the content, causing it to break into a new line.

Therefore, change col-sm->1

In Bootstrap 4, the xs size is no longer available, so it should be removed.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="mobile">
    <div class="container">
        <div class="row">
            <div class="col-sm-2">
                <a href="shop"><img src="https://i.sstatic.net/3mG2d.jpg" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p></a>
            </div>   
            <div class="col-sm-2">
                <a href="shop"><img src="https://i.sstatic.net/3mG2d.jpg" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p></a>
            </div>  
        </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

Issues arise when attempting to affix the navigation bar to the top of the webpage

After running the code below, I noticed that my navbar is not behaving as expected and seems to be stuck in the middle of the screen instead of being fixed to the top. This is confusing for me because I have created navbars before that worked fine. Any ass ...

htmlcssdjangobootstrap-4nav

retrieve the list of css stylesheets connected to a webpage

Currently, I am running some tests on Firefox's Error Console. My main focus is on identifying and rectifying errors in the stylesheets. For regression testing purposes, I need to compile a list of all HTML pages that are connected to these stylesheet ...

htmlcsserror-console

Adding identifiers to columns in DataTables depending on the value of another attribute

I am facing a challenge with inserting the <span> tag into the "salesStatusName" column cell that already contains some data. This should only happen when the value of the last column, "completelyDelivered", is true. However, I do not want to display ...

javascripthtmljsonajaxdatatables

Creating dynamic divs with ng-repeat in AngularJS

As someone who is new to angularjs, I am looking for a way to dynamically add a div by clicking on an add icon. I have written some script for this purpose. This is the HTML section: <div ng-show="child" class="childDiv" data-ng-repeat="choice in choi ...

htmlangularjsangularjs-ng-repeatangularjs-ng-model

Troubleshooting a Jquery issue: change event not functioning

I have a dropdown menu with 2 options (Local/Import). Each option corresponds to a specific table that should show on the page when selected. However, I've tried using jQuery's change function but it's not functioning as expected. Instead of ...

jqueryhtml

An image on the left side of a perfectly aligned text

I am currently working on aligning an image and text for a logo. However, I am having trouble justifying the second line to the width of the block. Here is the desired result: This is what I have tried: @import url(http://fonts.googleapis.com/css?famil ...

htmlcssjustify

Is there a way to reset the dynamic flexslider when a click event occurs?

Seeking a way to refresh the flexslider on a click event. I have embedded the flexslider in a Bootstrap pop-up and need it to update when the user clicks. The issue arises when I try to refresh the slider as it fails to display properly, likely due to losi ...

javascriptjquerycsstwitter-bootstrapflexslider

How can you alternate a button's text using jQuery?

Seeking advice on jQuery and Javascript: Take a look at this HTML snippet: <div class="quandoo-widget" id="quandoo-booking-widget"></div> <script src="https://booking-widget.quandoo.com/index.js" data-merchant-id="48554" data-theme="dark"& ...

jqueryhtmlcss

Toggling back and forth between two divs using a pair of buttons

I've been experimenting with switching between two divs using two buttons, but I can't seem to get it right. I've searched all over the internet, but nothing has worked for me so far. Can you please point out what I might be doing wrong? Als ...

javascriptjqueryhtmlcss

Flex children do not adhere to max-height and max-width properties

There seems to be an issue with setting the max-width and height for flex children. The div is getting squished down to fit its children exactly, possibly due to the styling associated with div .content. It's not clear why this is happening. The divi ...

htmlcssflexbox

Insert a line break element following every 12th character within a given string

$my_string = "Lorem Ipsum is simply dummy text of the printing and typesetting industry." Desired Output : "Lorem Ipsum <br/> is simply<br/> dummy text<br/>of the printing<br/> and typesetting<br/> industry." The tag should ...

phphtmlstring

My Ruby on Rails app seems to be malfunctioning in a major way

Instead of sharing code snippets, I’ve encountered difficulties in getting my jQuery code to work correctly. If you're curious, you can view the issues on Stack Overflow: Why doesn’t this jQuery code work? and This jQuery hide function just does n ...

javascriptjqueryhtmlruby-on-railsruby

Inheriting the width of a sibling element through span tags

I am dealing with a situation where I have a div containing a header element and a span. Is there a way to prevent the span from expanding the size of its parent div? In other words, I want the width of the span to be limited to the width of the adjacent ...

htmlcsstwitter-bootstrap

Create a new class in the body tag using Javascript

If the operating system is MAC, I set a variable and then based on a condition, I want to add a new class in the body tag. Check out my code snippet: <script type="text/javascript" language="javascript"> var mac = 0; if(navigator.userAgent.index ...

javascriptjqueryhtml

Apply CSS3 to target all td elements within the main table that contains nested tables

Today, I delved into the world of CSS3 and HTML5 through Codecademy. HTML: <table class="main"> <tr class="questioncontainer"> <td class="serialnumber">1.</td> <td class="question" colspan="2">What is the ...

htmlcss

Obtain the data from a specific row

I need to find the 'td' element that contains the text 'xyz' in order to access the other attributes in the same row. I only have the 'xyz' value and want to retrieve the rest of the elements within that row. . . . <tr> ...

pythonhtmlwebweb-scraping

How to modify the appearance of the md-tab-header component in Angular2

Currently, I am working on a project that was passed down to me by a former colleague. It is a gradual process of discovery as I try to address and resolve any issues it may have. One particular element in the project is a md-tab-header with a .mat-tab-he ...

cssangular

How can I duplicate or extract all the formatting applied to a specific text selection in Ckeditor?

I am currently utilizing CKEditor version 3.6 within my Asp.net MVC 3 Application. One of my tasks involves creating a Paint format option similar to Google Docs. I am looking to integrate this feature into CKEditor. Is there a way in CKEditor to transfe ...

javascriptasp.netcssasp.net-mvcckeditor

What is a method to raise the height when scrolling down without reducing it when scrolling up?

For my One Page project, I want a DIV element to increase in height when scrolling down, but maintain that increased height when scrolling up. Currently, I am utilizing JQuery with the code snippet below: $(function(){ $(window).scroll(function() { ...

javascriptjquerycss

increasing the size of the input field on the lower row of the form

I have a form with two rows of text boxes. The first row contains three text boxes, while the second row should only have one text box that spans 100% of the width. Here is the current code: <div class="row"> <div class="col-md-4"> ...

htmlcssasp.netbootstrap-4flexbox