Click here to Skip to main content
15,901,205 members
Please Sign up or sign in to vote.
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
Updated 9-Feb-23 5:38am

1 solution

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"
 
Share this answer
 
Comments
MAHESH WAGHELA 9-Feb-23 11:45am    
Thanks Richard Its Working.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900