Tips for centering text and icon on a Bootstrap navigation bar

I am currently developing an Angular 4 application that includes a navigation bar with text and font awesome icons.

While the UI looks good in web view, I'm facing alignment issues when it comes to mobile view (minimized screen).

Despite my efforts, I haven't been able to resolve this problem.

In the minimized view:

https://i.sstatic.net/3YqOc.jpg

The expected layout is shown below for reference:

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

You can access the stackblitz file here: https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-w1qhj4?file=app%2Fapp.component.html

htmlcssbootstrap-4

Answer №1

xs is universal for all screen sizes if no other specifications are given, whereas sm does not cater to mobile screens.

<div class="col-md-3 col-xs-12"> <!-- Modified -->
        <div class="container">
          <div class="row">

            <div class="col-xs-2">  <!-- Modified -->
              <i class="fas fa-phone text-white" style="font-size:40px"></i>
            </div>

            <div class="col-xs-10">  <!-- Modified -->
              <div class="container">
                <div class="row">
                  <span class="text-white text-uppercase col-sm-12">Demo 1</span>
                  <span class="text-white col-sm12" style="margin-left: 14px">Text Text</span>
                </div>
              </div>
            </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

Find the value of the nearest input field using jQuery

I'm working with HTML code that looks like this: <tr> <td class='qty'><input class='narrow' value='1' /><i class='fa fa-trash' aria-hidden='true'></i></td> < ...

javascriptjqueryhtml

The font size on my website fluctuates up and down every time I refresh the page or navigate to a different one

I am currently in the process of updating my research lab's website using a Jekyll framework with Bootstrap. However, I have encountered an issue where the font size grows slightly whenever I navigate to a new page or refresh the current one, before r ...

htmlcsstwitter-bootstrapjekyll

css overflowing content can disrupt the layout of the screen

I am currently working on creating a modal that will be displayed in the center of the screen with the same width as the main page. However, I am facing an issue where the modal is not perfectly centered. I suspect that this is due to the overflow style ...

cssoverflowwidthscreen

Exploring the functionality of the block grid and its purpose within Foundation5

I recently came across Foundation5's Block Grid feature, which seems to have a limited online presence in terms of use cases demonstrating its importance. Unlike Bootstrap3, which does not include Block Grid, I am curious about how significant of a fu ...

csstwitter-bootstrap-3zurb-foundationzurb-foundation-5

Preventing the entire HTML page from loading in the registration form on ASP.NET: Tips and tricks

I am currently developing an ASP.NET web application that includes a registration form. However, I am facing an issue where every time a user enters their Username or Email, the entire first_home page reloads. How can I prevent the entire page from reloadi ...

c#htmlasp.netdatabaseconstraints

Difficulty getting onclick event to trigger with input type=button

Having trouble submitting my form using JavaScript. The onclick event is not working when used with an input type button, and even the alert in the function is not displaying.... <input type="button" value="Register" id="org_reg_submit" class="reg_i ...

javascriptphphtml

Discover every DropDown that has a checkbox selected

I have a straightforward setup displayed below. My goal with jQuery is to locate all dropdowns where the checkbox is ticked. <table> <tr> <td> <asp:DropDownList ID="ddDurationHours" runat="server"/> <td> <t ...

jqueryasp.nethtml

utilizing the Link component from react-router-dom in conjunction with a button

Working on my project, I've implemented react-bootstrap Cards which provide a great visual display. In one of the cards, there's a horizontal search button that I want to use for routing purposes. I configured the settings in my app.js class to c ...

reactjsbootstrap-4react-router-dom

JSON accessed through the file:// protocol

When opening my web app, the browser displays a .html file with the address bar showing the protocol file://. However, I need to open a .json file in the script and load it into a variable. I have attempted using $.ajax request with data type jsonp, as we ...

javascriptjqueryhtmljsonajax

Creating a p5.js circle on top of an HTML image: A step-by-step guide

Currently, I am integrating an image into my web application using standard JavaScript and HTML. The image represents a basic map, and my objective is to utilize p5.js to draw on it. <div id="map"> <img src="Assets/MENA.jpg" ...

javascripthtmlcssp5.js

What steps should be followed in order to replicate the border design shown in the

Checkboxes Border Challenge I am looking to connect the borders between my checkboxes. I attempted to use pseudo-borders, but encountered issues with setting the height for responsiveness across various screens. If anyone has suggestions on how to tackl ...

cssresponsive-designbootstrap-5borderpseudo-element

Ensuring that the text in the Bootstrap navbar is responsive for all screen

Yesterday, I inquired about how to modify my navbar menu to switch from horizontal to vertically arranged depending on layout. However, I've noticed that the responsiveness is not consistent when adjusting the window size. Is there a way to ensure my ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for arranging 3 tables in the right place using CSS

I have 3 tables that I utilize. My goal is to: have one on the left side of the page place one in the center of the page position one on the right side All at the same height. The issue arises when the tables expand and using float causes them to ...

htmlcsshtml-table

Tips for implementing the .nex() property from jQuery in CSS styling

When I add the class "playing", then I will apply custom CSS to the next li tag. Please review my code and see if you understand. Please take a look at my code. <ul> <li class="playing">li (sibling)</li> <li id="head">li ...

javascriptjqueryhtmlcssajax

JavaScript click event not triggering on ASP.NET button

Currently, I am attempting to invoke a C# function from JS without using ajax. One approach I have tried is creating an ASP.NET button that, when clicked, calls the C# function and triggers the click event from JS: In the HTML section: <asp:Button run ...

javascriptc#htmlasp.netclick

Retrieve information upon clicking on a table entry

Currently, I am displaying data from the "login" table in MySQL using PHP within an HTML table. Take a look at the code snippet below: <table class="table"> <thead class="thead-dark"> < ...

javascriptphphtmlmysqlpost

Eliminate the gap between spans when wrapping words

I am facing a challenge with displaying text and an icon together in a div. The requirement is for the icon to always be positioned right next to the text, even when the text wraps due to limited space. Various solutions have been attempted, but they all ...

htmlcssflexbox

Having difficulty modifying the styling of a paragraph within a div container

I have been working on a function that is supposed to adjust the font-size and text-align properties of a paragraph located within a div tag once a button is pressed. function customizeText() { document.getElementById('centretext').innerHTML = ...

javascriptcssfonts

Is there a way to create a mobile-exclusive slideshow using JavaScript?

I am trying to create a slideshow on my website, but whenever I add JavaScript it seems to break the desktop version. I want these three pictures to remain static and only start sliding when viewed on a mobile device. I have searched for resources on how t ...

javascripthtmlcss

Tips for preventing the ng-click event of a table row from being triggered when you specifically want to activate the ng-click event of a checkbox

So, I've got this situation where when clicking on a Table Row, it opens a modal thanks to ng-click. <tr ng-repeat="cpPortfolioItem in cpPortfolioTitles" ng-click="viewIndividualDetailsByTitle(cpPortfolioItem)"> But now, there&apos ...

javascriptjqueryhtmlangularjscheckbox