CODEWITHSUNDEEP
htmltwitter-bootstrapcssbootstrap-4
LacOniC
LacOniC

Reputation: 934

Container-Fluid in Mobile

I have a list like that:

enter image description here

I open a hidden div to show details about list items like that:

enter image description here

It's ok for large screen but in mobile info div goes so below. Is it possible to open info div as %100 (Container-Fluid) under that item in mobile like that:

enter image description here

If it's possible what is the keywords or can you show an example? Thanks in advance.

Upvotes: 0

Views: 932

Answers (2)

Vincent1989
Vincent1989

Reputation: 1657

I have created a sample where you need to create two locations with the same div contents, one for mobile (.mobile-content) and one for desktop (.desktop-content).

The way you style it is when the mobile is visible, the desktop is hidden and vice versa. You can hide and show element using the Bootstraps 4 .d-x-none and .d-x-block.

The only thing left is you have to implement the click mechanism when you click on the circles......

Example (view this in full page):

.main-box {
 text-align:center;
}

.circle{
  flex-basis:33%;
}

.circle img{
  background:pink;
  border-radius: 50%;
  max-width:100%;
}

.mobile-content{
  flex-basis:100%;

}

.desktop-content{
  text-align:center;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div class="main-box container-fluid d-flex justify-content-center flex-wrap flex-lg-nowrap">
  
  <div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
  <div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
  <div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
  <div class="mobile-content p-2 d-lg-none">
    <p>description comes here</p>
  </div>
  <div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
  <div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
  
</div>


 <div class="desktop-content p-4 d-none d-lg-block">
    <p>description comes here</p>
  </div>

Upvotes: 1

Znaneswar
Znaneswar

Reputation: 3387

In bootstrap 4, for equal columns in all devices try like this

<div class="row">
<div class="col">
      1 of n
    </div>
    <div class="col">
      1 of n
    </div>
    <div class="col">
      1 of n
    </div>
       .....
      <div class="col">
      n of n
    </div>
</div>

#circle {
	width: 50px;
	height: 50px;
	background: red;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
        <div class="col" id="circle">
          
        </div>
        <div class="col" id="circle">
          
        </div>
         <div class="col" id="circle">
          
        </div>
         <div class="col" id="circle">
          
        </div>
         <div class="col" id="circle">
          
        </div>
      </div>

Upvotes: 0

Related Questions