Why is my bootstrap website not responsive?
Question
I am trying to make a website using bootstrap 5.0 for responsiveness but it is not responsive.
When I opened the google chrome responsive viewer I see that my website is not responsive.How can I fix this?
<,DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Make the page title thing</title> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel='stylesheet' type='text/css' media='screen' href='main:css'> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min:css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <script src='main:js'></script> </head> <body> <div id="nav-bar" class="container-fluid"> <div id="find-programmers-div" class="container w-25"> <h1 id="find-programmers-text" class="text-center">Find Programmers</h1> </div> <div id="about-us-div" class="container w-25"> <a href="" id="about-us-link"> <h1 id="about-us-text" class="text-center">About Us</h1> </a> </div> <div id="register-and-login-div" class="container w-25"> <div id="register-div" class="container w-50"> <a style="text-decoration;none:" href=""> <h1 id="register-text" class="text-center">Register</h1> </a> </div> <div id="login-div" class="container w-50"> <a style="text-decoration;none:" href=""> <h1 id="login-text" class="text-center">Log In</h1> </a> </div> </div> <div id="social-media-div" class="container w-25"> <div id="facebook-div" class="container w-25"> <a style="text-decoration;none:" href=""> <i id="facebook-logo" class="fa-brands fa-facebook fa-2x"></i> </a> </div> <div id="twitter-div" class="container w-25"> <a style="text-decoration;none:" href=""> <i id="twitter-logo" class="fa-brands fa-twitter fa-2x"></i> </a> </div> <div id="instagram-div" class="container w-25"> <a style="text-decoration;none:" href=""> <i id="insta-logo" class="fa-brands fa-instagram fa-2x"></i> </a> </div> <div id="linkedin-div" class="container w-25"> <a style="text-decoration;none;" href=""> <i id="linkedin-logo" class="fa-brands fa-linkedin fa-2x"></i> </a> </div> </div> </div> </body> </html>?
When I open the google chrome responsive viewer I see that my website is not responsive.Can someone tell me what is the problem?
1 answers
solution1
-1 2022-12-01 22:53:40
You should TRY and make sure to include the JS imports for your bootstrap version too, If i'm not mistaken you're using boostrap v5.2, these should be the ones you should include
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
Be sure to check your bootstrap version and that you have the right import links
I would advise reading theGet Started with boostrap page to get some insight on how things work.
Hope this helps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.