How to Hide One Column from Grid in Bootstrap Mobile Version

how to hide one column from grid in bootstrap mobile version

Since, you are hiding the second column in "xs", you can use the full width for the first column by defining the class "col-xs-12" to column1.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><div class="row">  <div class="col-xs-12 col-sm-9">    <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p>  </div>  <div class="col-sm-3 center-image hidden-xs"><img src="myimage.png"/></div></div>

Bootstrap 4: How to hide a column once grid system's breakpoint is reached?

Based on the official documentation, you should use Display Property Utilities like this:

<div id="col3" class="col-md-5 d-sm-none d-md-block">
    I am Column 3, I should disappear once the breakpoint is reached!
</div>

hide column in bootstrap on mobile phone

Yes, this is actually the approach twitter bootstrap uses. Have a look at the source code of their grid system.

The hidden-phone, ... classes (these have been renamed to hidden-xs, .. in version 3) work by just setting the "display" attribute to "none" or "block" depending on the current media query. Have a look at their responsive-utilities and mixins and look for the text 'responsive-visibility' if you want the full details.

While this is 'less' and not 'css', it should be readable. If you're curious what 'less' is, visit the website at lesscss.org

Hide a column on smaller screens for Bootstrap 4

You have to use display utilities classes, in this case:

d-none d-lg-block: hide on screens smaller than lg

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/><div class="container-fluid">        <div class="row">     <div class="col-sm-3 d-none d-lg-block">col-sm-3</div>     <div class="col-sm-9">col-sm-9</div>   </div>  </div>

How to hide 1 column in a row and show second column only from medium screen to small screen in bootstrap 5?

To show/hide elements in BS5 you can use .d-{breakpoint}-{value} classes.
The classes are applied from min-width: 0; and up.

So, you can set .d-block.d-md-none, which means to show block for mobile, and up to 'md' breakpoint (tablet and larger) - hidden.

And opposite: .d-none.d-md-block - will hide for mobile and show block for tablet and larger

body{
    margin: 0;
    padding: 0;
}
@media screen and (min-width: 300px) and (max-width: 500px){
}
@media screen and (min-width: 500px) and (max-width: 700px){
  
}
@media screen and (min-width: 700px) and (max-width: 900px){

}
@media screen and (min-width: 900px) and (max-width: 920px){
}
    .left_bar{
        height: 100vh;
        background-color: #030C13;
        margin: 0;
    }
    .hero_image{
        width: 100%;
        height: 100vh;
        background-image: url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
        background-position: center;
        background-position: right;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .img-thumbnail{
        border: none !important;

    } 
    .profile_pic {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-top: 3em;
        display: flex;
        justify-content: center;
        box-shadow: -1px 0px 0px 14px #262837
    }
    .name{
        display: flex;
        justify-content: center;
        margin-top: 1em;
        color: #FCFEFF;
    }
    .fb_div{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1D212B;
        padding: 1.5em;
        margin-left: 1em;
    }
    .tw_div{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1D212B;
        padding: 1.5em;

    }
    .lg_div{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1D212B;
        padding: 1.5em;
        margin-left: 1em;
    }
    .fa-twitter {
        font-size: 20px;
        left: 16px;
        position: absolute;
        top: 15px;
        color: white;
        cursor: pointer;
    }
    .fa-facebook-f {
        font-size: 20px;
        left: 19px;
        position: absolute;
        top: 15px;
        color: white;
        cursor: pointer;
    }
    .tw_div:hover{
        background-color: white;
    }
    .tw_div:hover .fa-twitter{
        color:black ;
    }
    .fb_div:hover{
        background-color: white;
    }
    .fb_div:hover .fa-facebook-f{
        color: black;
    }
    .lg_div:hover{
        background-color: white;
    }
    .lg_div:hover .fa-instagram{
        color: black;
    }
    .fa-instagram {
        font-size: 24px;
        left: 15px;
        position: absolute;
        top: 12px;
        color: white;
        cursor: pointer;
    }
    .fa-skype{
        font-size: 24px;
        left: 15px;
        position: absolute;
        top: 12px;
        color: white;
        cursor: pointer;
    }
    .fa-linkedin-in{
        font-size: 24px;
        left: 15px;
        position: absolute;
        top: 12px;
        color: white;
        cursor: pointer;
    }
    .sky_div{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1D212B;
        padding: 1.5em;
        margin-left: 1em;
    }
    .sky_div:hover{
        background-color:white ;
    }
    .sky_div:hover .fa-skype{
        color: black;
    }
    .ld_div{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1D212B;
        padding: 1.5em;
        margin-left: 1em;
    }
    .ld_div:hover{
        background-color:white ;
    }
    .ld_div:hover .fa-linkedin-in{
        color: black;
    }
    .nav_tabs{
        display: flex;
    }
    .nav-link{
        color: #92959D ;
        margin-bottom: 1em
    }
    .nav-link:hover{
        color: white;
    }
    .fa-home{
        color: #377DB3;
        font-size:1.5em;
    }
    .fa-user{
        color: #5F656F;
        font-size:1.5em;
    }
    .nav-link:hover .fa-user{
        color: #377DB3;
    }
    .fa-file{
        color: #5F656F;
        font-size:1.5em;
    }
    .nav-link:hover .fa-file{
        color: #377DB3;
    }
    .nav-link:hover .fa-list-alt{
        color: #377DB3;
    }
    .fa-list-alt{
        color:#5F656F ;
        font-size:1.5em;
    }
    .nav-link:hover .fa-server{
        color: #377DB3;
        
    }
    .fa-server{
        color: #5F656F;
        font-size:1.5em;
    }
    .nav-link:hover .fa-envelope{
        color: #377DB3;
    }
    .fa-envelope{
        color: #5F656F;
        font-size:1.5em;
    }
    .nav-item a{
        margin-left: 1em;
    }

<!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>Assignment 8</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
    <div class="container-fluid">
    <div class="row">
        <div class="d-none d-lg-block col-lg-3 left_bar">
            <img src="https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg" class="img-fluid profile_pic mx-auto" alt="...">
            <h2 class="name">Alex Smith</h2>
            <div class="socials mt-lg-4 d-flex justify-content-center">
                <div class="tw_div"><i class="fab fa-twitter"></i></div>
                <div class="fb_div"><i class="fab fa-facebook-f"></i></div>
                <div class="lg_div"><i class="fab fa-instagram"></i></div>
                <div class="sky_div"><i class="fab fa-skype"></i></div>
                <div class="ld_div"><i class="fab fa-linkedin-in"></i></div>
            </div>
            <div class="nav_tabs">
            <ul class="nav flex-column ms-lg-3 mt-lg-4 ">
                <li class="nav-item">
                  <a class="nav-link" aria-current="page" href="#"><i class="fas fa-home"></i><span class="ms-2">Home</span> </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#"><i class="fas fa-user"></i><span class="ms-2">  About</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#"><i class="fas fa-file"></i><span class="ms-2">  Resume</span>  </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fas fa-list-alt"></i><span class="ms-2">Portfolio</span> </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fas fa-server"></i><span class="ms-2">Services</span> </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fas fa-envelope"></i> <span class="ms-2">Contact</span></a>
                  </li>
                     
              </ul>
            </div>
        </div> 
     <div class="col-12 col-md-12 col-lg-9  hero_image">

     </div>
    </div>
</div>
</body>
</html>

How to hide some of the columns in the table when in mobile view?

You can use bootstrap in built classes for this scenario like

.hidden-xs{
    /*By adding class to the div will be hidden in phones and will be visible in desktop*/
}

And for more classes you can refer to this link.

---

Related Topics