김정명 김정명 - 1 month ago 11
CSS Question

Bootstrap hidden-md not working

I want to conceal column that col-md-0 in my screen on md size.
But It shows my screen . How can I hide that?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">


is exist in my
<head>
tag

<div class="container-fluid top-nav">
<div class="row">
<div class="hidden-xs hidden-sm col-md-1 left-fixed-bar">
나왔다가 숨겨질 부분.
</div>
<div class="col-xs-1 col-sm-1 hidden-md left-fixed-bar">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
<!-- End of left part -->
<div class="hidden-xs hidden-sm col-md-8 center-fixed-bar">
나왔다가 숨겨질 부분.
</div>
<div class="col-xs-9 col-sm-9 hidden-md">
숨겨져있다 나올 부분
</div>
<!-- End of center part -->
<div class="col-xs-2 col-sm-2 col-md-3 right-fixed-bar">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<!-- End of right part -->
</div>
</div>

Answer

Actually there is no class such as col-md-0 for your purpose you wll need to write a media query and set width: 0%; on the medium screen resolution. or you can use the hidden-md class for your requirement. Which will hide your div im medium resolution. I have attached the code spinet for you.

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  </head>
  <body>
     <div class="container-fluid top-nav">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 left-fixed-bar">
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
            <div class="hidden-xs hidden-sm col-md-8 center-fixed-bar">
                EMPTY
            </div>
            <div class="col-xs-9 col-sm-9 hidden-md">
                TITLE
            </div>
            <div class="col-xs-2 col-sm-2 col-md-3 right-fixed-bar">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </div>
        </div>
    </div>
  </body>
</html>

Comments