I am experiencing issues with the responsiveness of my web page across various viewpoints, despite incorporating Bootstrap CDN links within the <head> tag

While coding in my VS Code editor for responsive websites, I encountered an issue where the output webpage was not as responsive as I expected. Even though I included Bootstrap CDN links in the head tag, the responsiveness did not meet my expectations. Below is an example of the code I used:

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div class="row">
        <div class="col-md-6 col-sm-3" style="background-color:grey; border: 1px solid;">col-md-6</div>
        <div class="col-md-3 col-sm-3" style="background-color:grey; border: 1px solid;">col-md-3</div>
        <div class="col-md-3 col-sm-3" style="background-color:grey; border: 1px solid;">col-md3</div>
        <div class="col-md-3 col-sm-3" style="background-color:grey; border: 1px solid;">col-md3</div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Despite using HTML, CSS, and Bootstrap to create a responsive website, the outcome did not meet the responsiveness criteria for long, small, or medium screen sizes. I had expected a different result from my coding efforts.

htmlcssvisual-studiobootstrap-4web-development-server

Answer №1

Utilize the following HTML code snippet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51333e3e25222523302111657f657f60">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="58283728283d2a76322b186976696e7668">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55373a3a21262127342515617b617b64">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

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

Styling elements using css and flexbox

Looking for some help with wrapping 4 items in CSS using flex. I want to display 3 items in a row, followed by a single item. .movies { display: flex; flex-direction: row; justify-content: space-between; align-items:flex-start; flex: 1 ...

htmlcssflexbox

Trigger responsiveness issues with Bootstrap

Currently, I find myself in a somewhat awkward situation. I have developed a website using Bootstrap 4 (with Compass as a Ruby gem). However, due to ongoing discussions about its appearance on mobile devices, the client has requested that I revert the page ...

csstwitter-bootstrapscale

Center navigation bar text with the class `.justify-content-center`:

Can someone explain why, when I add the class justify-content-center to my Navbar in Bootstrap, the text remains in the left position? https://i.sstatic.net/8x0Yc.png I came across an instruction in the Bootstrap documentation stating that after adding t ...

htmlcsstwitter-bootstrapbootstrap-4navbar

Ways to slightly boost the default font-size values when using wicked-pdf

In the wicked-pdf report, I have body content with varying font sizes. When I apply a font-size of 16px to the paragraph like so: p { font-size: 16px !important; } The entire paragraph's font size becomes 16px, which may include words with diff ...

ruby-on-railshtmlcssruby-on-rails-2wicked-pdf

Designing a dynamic button with changing colors using html and css

Is there a way to design a button with a starting color of red, but changes to orange when the mouse hovers over it? I am looking to add this type of button to my website. ...

htmlcss

Attempting to arrange a line consisting of four individual cells

I am facing an issue while trying to create a row with 4 cells and I can't figure out why it's not working. The structure involves a parent element called row with 4 child elements. <div className='row'> <div ...

csssassscss-mixins

Create a fully responsive introduction page with three columns using Bootstrap, ensuring that the height of the

Currently, I am in the process of designing a website for a restaurant, hotel, and vineyard. My goal is to create three separate websites that are linked through one introductory page. The concept for the intro page involves three columns displayed side b ...

htmlcsstwitter-bootstrap-3responsive-design

The JavaScript array slideshow is experiencing some glitches in its transition

After diving into JavaScript recently, I managed to center a div and make it fullscreen as the window resizes. However, things got tricky when I added a script I found online to create an image transition using an array. Unfortunately, these scripts are co ...

javascripthtmlcss

What is causing justifyContent: space-between not to function properly?

I want to display Text1Text2Text3Text4Text5Text6Text7 at the top with text alignment using justifyContent: 'space-between'. However, when I tried to do so, all texts ended up at the top. <div style={{display: 'flex-item', flex: 1, ...

htmlcssflexbox

Steps for including a solid bottom border in a toggled navigation bar that is responsive

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l ...

htmlcssbootstrap-5

I'm encountering an unexpected error as I attempt to incorporate a bootstrap template into my Angular application. What could be causing this issue

I am not very experienced with front-end development, so for my current project, I have decided to utilize a pre-made Bootstrap template. I am in the process of integrating it into my project, relying more on my intuition rather than technical expertise du ...

angularhtmlcssbootstrap-4

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

When the page is loaded, ensure a condition is met before displaying a modal pop-up using AngularJS

Just starting out with AngularJS and looking to implement a modal pop up? I've tried using the modal on button click from the Angular dialog demo tutorial. Now, I want to show the pop up based on a condition when the page loads. The idea of automatic ...

javascriptjqueryhtmlangularjsmodal-dialog

Experience the magic of Materialize CSS SideNav

I'm currently attempting to implement the mobile side navigation provided by Materialize. I've managed to display the menu icon, but when I click on it, nothing happens. It seems like the function is not being triggered, and there are no errors s ...

jqueryhtmlcssangularjsmaterialize

The Google Map is unable to expand to fill the entire width of the column

I have exhausted all my efforts trying to troubleshoot this issue on my project's contact page. Currently, I have a layout with 3 rows containing columns within a Bootstrap 4 grid. The third row is supposed to display a Google Map within a column set ...

htmlcssbootstrap-4

Tips for customizing the background of form inputs in React-Bootstrap

Currently, I have a next.js project with react-bootstrap. I am attempting to change the default blueish gray background color (#e8f0fe or rgb(232, 240, 254)) that bootstrap uses for form inputs to white. To achieve this, I am customizing the bootstrap var ...

cssbootstrap-4sassnext.jsreact-bootstrap

Expansion issue with Bootstrap panel

I am currently using Bootstrap 3 for the development of a social networking site. The issue I'm encountering involves displaying comments within a panel footer on toggle. However, the comments are extending beyond the footer area. Can anyone provide g ...

phphtmlcsstwitter-bootstrap-3

When trying to upload a file with ng-upload in Angular, the error 'TypeError: Cannot read properties of undefined (reading 'memes')' is encountered

Struggling with an issue for quite some time now. Attempting to upload an image using ng-upload in angular, successfully saving the file in the database, but encountering a 'Cannot read properties of undefined' error once the upload queue is comp ...

html.netangulartypescript

Scaling of SVG elements with a fixed canvas size across different end-user resolutions

I am currently using Power BI and the HTML Content visual to create a .svg image. The canvas default size is 1280x720, which cannot be changed. I designed the .svg in Canva at 1920x1080 resolution to accommodate both 720P and 2K users. To make the .svg dyn ...

htmlxmlimagesvgpowerbi

Floating label hides the textbox text with a unique style

I'm trying to create a floating label effect for textboxes in my form that moves up on hover and focus. However, I'm running into an issue where the text gets hidden when the label moves up. Below is the HTML and CSS code I've been working ...

htmlcss