Unexpected behavior with Bootstrap classes

I have come across the following HTML code which appears to be using bootstrap, however, it is not responsive. It is supposed to be responsive and adapt to mobile and tablet devices, but it still displays the desktop view on mobile and tablet screens.

<div class="overlap"></div>
<div class="container">
  <div class="row justify-content-center pb-5 pt-3" >
    <div class="col-md-5 block mt-3">
      <form (ngSubmit)="SearchBus(f)" #f=ngForm>
        <div class="row">
          <div class="form-group col-md-6">
            <label>Leaving from</label>
            <select (change)="leave($event)"name="leaving_form" required ngModel class="form-control form-control-sm">
              <option value="">Select Place</option>
              <option value="dhaka">Dhaka</option>
              <option value="comilla">Comilla</option>

              <option value="chittagong">Chittagong</option>
            </select>
          </div>
          <div class="form-group col-md-6">
            <label>Going To</label>
            <select name="going_to"  [ngModel]="place[0].key"   required class="form-control form-control-sm">
               <!-- <option value="1109001">Comilla</option>
              <option value="1109002">Chittagong</option>
              <option value="1109003">Sylet</option>
              <option value="1109004">Barishal</option> -->

              <option *ngFor="let p of place"  [value]="p.key">{{p.value}}</option>
            </select>
          </div>
        </div>
        <div class="row">
          <div class="form-group col-md-12">
            <label for="">Departing On</label>
            <input type="date" required class="form-control form-control-sm" ngModel name="depart_date" >
          </div>

        </div>
        <button [disabled]="!f.valid"class="btn btn-block mt-3 btn-search btn-sm"> <i class="fas mr-2 fa-search"></i> Search Buses</button>
      </form>
    </div>
    <div class="col-md-5 slider mt-3 ">
      <img src="../assets/img/redBus-coupons-offers-1586.PNG" class="img-fluid">
    </div>
  </div>
</div>

What steps can be taken to ensure that the above code is responsive on all devices?

Answer №1

For optimal display and touch zoom capabilities across all devices, it is recommended to include the responsive viewport meta tag in the <head> section of your website.

Source: Bootstarp 4 docs

To address this issue, simply add the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Thank you!

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

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 ...

Multi-object retrieval feature in Material Dialog

I am encountering an issue with Material Dialog when confirming the action to "remove row" in a table. Initially, removing from the dialog works fine and deletes a row. However, after closing the dialog and re-calling it for the second time, the removal ac ...

animation for closing the hamburger menu

Having trouble creating a hamburger menu animation. I've set up two divs - one for the basic horizontal lines and one for the X icon. Using jQuery, I can hide and show them (clicking on the lines hides them and shows the X). But now I want to animate ...

When I executed the npm install -g @angularcli command, I encountered an npm error with the code ENOLOCAL

On my initial attempt, I used a computer with Windows 10 and another one with Windows 8.1. Surprisingly, I encountered the same error message on both systems. The log of the error is as follows: npm ERR! code ENOLOCAL npm ERR! Could not install from "@ang ...

Grails Error: Cannot find method signature for org.apache.catalina.core.ApplicationHttpRequest.getFile()

Every time I try to access the upload page of my Grails application, I encounter this error message: No signature of method: org.apache.catalina.core.ApplicationHttpRequest.getFile() is applicable for argument types: (java.lang.String) values: [file] ...

The importance of precision in a written text

When it comes to being specific, I usually pride myself on my skills. However, there's one particular challenge that I can't seem to crack. Here's the scenario: Imagine you have a list structured like this: <ul class="dates"> < ...

Is it possible to integrate a GWT library into Dart programming?

Considering migrating to Dart, but unsure of its maturity. Can a library originally written in GWT be used in Dart? ...

How can I add a drop-down list to a cell within a table?

Can a drop-down list be added into a table cell? Thank you! Here is an excerpt of the code: $sql_query="SELECT nameOfwarning FROM warnings"; $sodss=mysqli_query($d,$sql_query); if (mysqli_num_rows($result)<1) ?> <select name = "warnings"> ...

The password field value in an Angular form is not defined

After making some modifications to a sign-in template that worked perfectly before, I encountered an error when trying to submit the signup form. The error message reads as follows: ERROR TypeError: Cannot read property 'value' of undefined Here ...

Experiencing the error "f.ngOnChanges is not a function in target es5" while using Angular4

Encountering an issue f.ngOnChanges is throwing an error The problem arises when my tsconfig.json file is configured to target es5. However, everything works fine if I set the target to es6. Is there a way to make ngOnChange function properly with es ...

Move the button to the following line and center it. Ensure that the background image remains at full size

.home{ background-image:url("https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg"); background-repeat: no-repeat; height: 100vh; display: flex; align-items: center; justify-content: center; } .hero-text{ fon ...

What is the best way to consistently position a particular row at the bottom of the table in AG-grid?

I have successfully implemented a table using AG-grid. Here is the code snippet: .HTML <ag-grid-angular #agGrid style="width: 100%; height: 100%; font-size: 12px;" class="ag-theme-alpine" [rowData]=&quo ...

Inject some vibrancy by incorporating color in the space between the navbar and banner on the

Hello! I am relatively new to front-end development and I am currently working on converting a PSD design to code for a project. I am struggling a bit to understand certain concepts but I am eager to learn and improve. I am using Bootstrap 4 for this proje ...

the child div within a Bootstrap 3 column is not being properly styled

Experiencing a strange issue with a relative div within a column in Bootstrap 3. Here's my code: <div class="col-lg-6"> <div class="large" style="background: url(img/bg.jpg);"> <h1 class="grid-header">Content 1</h1> ...

Ensuring Date Data Integrity with HTML5 Validations

I need to set up validation for a mobile website that includes two input fields. The first field should validate that the value is not later than today's date, while the second field should validate that it is not later than one year in advance of the ...

The problem arises when the body/html element is narrower than the browser window

I encountered a strange issue while working on a website for a client/design studio. Despite setting the body and html elements to a width of 100%, I noticed that when I resize the browser, a scrollbar appears forcing me to scroll right. Upon scrolling, I ...

Arranging the final item in the empty space above the div section using Flexbox

Kindly review this code for additional details. Take a look at the image above for a clearer understanding. On the right side of the image, you will notice that the last row contains two items and the second row has one empty slot. I need to rearrange one ...

Could you please ensure that the animation activates upon hovering over the "a" element?

Utilizing bootstrap, I have created the following code. I am looking to add functionality that triggers an animation upon mouseover of an img or a element, and stops the animation upon mouseleave. .progress-bar { animation: pr 2s infinite; } @keyfr ...

What is the process for modifying the design of an NPM package?

I may have a silly or incorrect question, but what exactly is the extent of default styling in an NPM package? If I am using an NPM package and wish to adjust the color of one of their elements, how should I go about it? In both my own index.css file and ...

Focus on input using jQuery (fixed focus)

How can I ensure that my input always has value and the focus remains fixed on it until values are typed, preventing the cursor from escaping the input field? While I know the existence of the focus() function, how can I effectively utilize it as an event ...