Bootstrap display not working in my case why? .

Question

0.00/5 (No votes)

See more:

I have a div of row class in my HTML Code where I want to show three Div and hide one Div in mobile devices as per below code.

<?php

session_start();
$mobil=null;
if(isset($_SESSION['mobi'])){
    
    $mobil = $_SESSION['mobi'];
    
}
?>
<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

 
</head>
<body style="margin:0;padding:0">
	<div style="width:100%;" >
		<img  src="img/logo1.jpg" style="display:inline; width:170px; height:70px;" />

		<a href="php/logout.php" style="display:inline;float:right;padding-right:1%;text-decoration:none;font-size:15px;">LogOut</a>
		
			<a href="login.html" style="display:inline;float:right;padding-right:1%;text-decoration:none;font-size:15px;margin-bottom:0">Login</a>
			
			<p style="display-inline;float:right;padding-right:1%">
			    <?php echo $mobil; ?></p>

			
			 

		  
		</div>

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-top:20px">
    <div class="container-fluid">
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" style="color:black;" class="nav-item nav-link active">Home</a>
                <div class="nav-item dropdown">
                    <a href="#" style="color:black;" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Products</a>
                    <div class="dropdown-menu">
                        <a href="tshirt.html" style="color:black;" class="dropdown-item">T-Shirt</a>
                        <a href="#" style="color:black;" class="dropdown-item">Jeans</a>
                    </div>
                </div>
                <a href="#" class="nav-item nav-link disabled" style="color:black;" tabindex="-1">About Us</a>
                <a href="#" style="color:black;" class="nav-item nav-link disabled" tabindex="-1">Contact Us</a>
            </div>
        </div>
    </div>
</nav>


<div class="container" style="margin-top:20px">
    
    <div class="row">
        
        <div class=".d-none" style="width:300px;">
            <p>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p>
        </div>
        
        <div class="col-sm-3">
            <img src="img/new/img14.webp" class="img-thumbnail" style="width:350px; height:370px; border: 1px solid black"/>
            <p style="margin-bottom:0">Brand-H"&"M</p>
            <p style="margin-bottom:0">Size="L"</p>
            <p style="margin-bottom:0">Price Rs.350/- + Ship </p>
        </div>
        <div class="col-sm-3" >
            <img src="img/new/img15.webp" class="img-thumbnail" style="width:350px; height:370px;border: 1px solid black"/>
            <p style="margin-bottom:0">Brand-H"&"M</p>
            <p style="margin-bottom:0">Size="L"</p>
            <p style="margin-bottom:0">Price Rs.350/- + Ship</p>
        </div>
        <div class="col-sm-3" >
            <img src="img/new/img16.webp" class="img-thumbnail" style="width:350px; height:370px;border: 1px solid black"/>
            <p style="margin-bottom:0">Brand-H"&"M</p>
            <p style="margin-bottom:0">Size="L"</p>
            <p style="margin-bottom:0">Price Rs.350/- + Ship </p>
        </div>
  
      
    
    </div>
        
    
    
    
</div>



</body>
</html>

Please look at below out of above code

<div class="row">

    <div class=".d-none" style="width:300px;">
        <p>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p>
    </div>

    <div class="col-sm-3">
        <img src="img/new/img14.webp" class="img-thumbnail" style="width:350px; height:370px; border: 1px solid black"/>
        <p style="margin-bottom:0">Brand-H"&"M</p>
        <p style="margin-bottom:0">Size="L"</p>
        <p style="margin-bottom:0">Price Rs.350/- + Ship </p>
    </div>
    <div class="col-sm-3" >
        <img src="img/new/img15.webp" class="img-thumbnail" style="width:350px; height:370px;border: 1px solid black"/>
        <p style="margin-bottom:0">Brand-H"&"M</p>
        <p style="margin-bottom:0">Size="L"</p>
        <p style="margin-bottom:0">Price Rs.350/- + Ship</p>
    </div>
    <div class="col-sm-3" >
        <img src="img/new/img16.webp" class="img-thumbnail" style="width:350px; height:370px;border: 1px solid black"/>
        <p style="margin-bottom:0">Brand-H"&"M</p>
        <p style="margin-bottom:0">Size="L"</p>
        <p style="margin-bottom:0">Price Rs.350/- + Ship </p>
    </div>



</div>

I have use bootstrap V5.

I am trying to hide as above but not working in my case. Where I am wrong?.

What I have tried:

Search and R & D my own but failed.

Posted 9-Feb-23 5:07am

MAHESH WAGHELA

Updated 9-Feb-23 5:38am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2023-02-09T05:38:00

Solution 1

Quote:
HTML
class=".d-none"

The leading . is used to declare a class selector in CSS, or to query elements by class name. It should not be included in the class attribute.

HTML

class="d-none"

Posted 9-Feb-23 5:38am

Richard Deeming

Comments

MAHESH WAGHELA 9-Feb-23 11:45am

Thanks Richard Its Working.