I am using Boostrap 3. Why the <div> with hidden-sm-down is still visible when I resize the page on my laptop? I want to hide those two images on small devices in order to have a different menu.
<div class="row">
<div class="col-md-7 left">
<ul class="row">
<li class="col-md-2">
Text
</li>
<li class="col-md-2">
Text
</li>
<li class="col-md-3">
Text
</li>
<li class="col-md-3">
Text
</li>
<li class="col-md-2">
Text
</li>
</ul>
</div>
<div class="col-md-1 hidden-sm-down wave">
<img src="img/ondina.png" />
</div>
<div class="col-md-3 right">
<ul class="row">
<li class="col-md-6">
Text
</li>
<li class="col-md-6">
Text
</li>
</ul>
</div>
<div class="col-md-1 hidden-sm-down right-border">
<img src="img/menu-right.png" />
</div>
</div>
Actually, hidden-sm-down won't work with Bootstrap 4 and above
(there use d-none instead of hidden-sm-down, and use d-sm-none instead of hidden-sm-up,
see also understanding-details).
With BS4, display utility classes are completely changed. Use this format instead;
.d-{breakpoint}-{value}
More information ; https://getbootstrap.com/docs/4.0/utilities/display/
As Jaqen said, if you use Bootrstrap 3, you should use hidden-sm instead.
Also, if you want to hide the image on small screen, you have to add hidden-xs.
Here's a JsFiddle : DEMO
You mention you use Bootstrap 3
Use hidden-sm instead of hidden-sm-down which belongs to Bootstrap 4
On a side note:
You also mention:
I want to hide those two images on small devices in order to have a different menu.
hidden-sm will hide the element on small screens such as iPad. To hide on extra small screens (such as Phones < 768px) add hidden-xs.
Take a look at the Bootstrap sizes table here
If you are using Bootstrap 4, you can utilize the following:
Hidden only on small screens
<div class="d-none d-lg-block">hidden on screens smaller than lg</div>
Visible only on small screens
<div class="d-none d-sm-block d-md-none">visible on small screens</div>
Related
On my widescreen monitor, my cover page looks like this (which is how I want it to look):
But on my smaller screen laptop, the words and the buttons (which are each in two separate columns) get spread out and my cover page looks like this:
I've tried several things but I can't seem to get them to stick together on smaller screens. Here is the relevant HTML code:
HTML:
<div class="container h-100">
<div class="row d-flex h-100 justify-content-center align-items-center g-0">
<div class="col-sm-6">
<div class="row">
<h1 class="title">transfer your</h1>
</div>
<div class="row">
<h1 class="title">music</h1>
</div>
<div class="row">
<h2 class="subtitle">between Spotify & YouTube</h2>
</div>
</div>
<div class="col-sm-4">
<div class="row mb-3">
<a class="btn" id="sp-to-yt" href="#" role="button">
</a>
</div>
<div class="row">
<a class="btn" id="yt-to-sp" href="#" role="button">
</a>
</div>
</div>
</div>
</div>
It's based on a percentage width. You can use the responsive classes to manage each screen size.
For small screens use <div class="col-sm-6"></div> which will display half-width on small screens. You can use multiple responsive classes like so...
<div class="col-sm-6 col-md-8 col-lg-3 col-xl-4"></div>
The responsive elements can be remembered as sm = small, md = medium, lg = large, etc, and will control each breakpoints div widths. Remember the max number of columns by default is 12.
Also, in your row.. <div class="row d-flex h-100 justify-content-center align-items-center g-0"> you don't need to define the display flex as .row is already a display flex class.
I've written something of a 'custom' nav bar using Bootstrap 4.5.
Basically, it's two columns/grids with a logo in the right column and a list that acts as a nav bar in the other.
I am really pleased with how it looks on a laptop/computer/tablet etc:
But it looks awful on mobile because the logo is aligned to the left (inherited, not actually using anything to align it left) and the list is aligned to the right (class="... text-right ...").
I'd like to make it so both the logo and list are aligned center on smaller mobile. I've tried a few things, like using an #media attribute in css with float:center;, and the only other way I can think to do this is to make the normal nav bar hidden/invisible on mobile and add a new one that's only visible on mobile, but I really don't want to have to do that as it'd mean I'd have to add links to the list twice etc.
I also tried aligning just the list center with this documentation: https://getbootstrap.com/docs/4.0/utilities/text/, but it didn't work.
My current nav-bar is:
<div class="topsection">
<div class="container">
<div class="row">
<div class="col-sm">
<img class="img-responsive" src="https://cdn.example.com/img/logo2.png" height="50px">
</div>
<div class="col-sm align-baseline">
<p><ul class="list-inline text-right font1">
<li class="list-inline-item active-nb">Home</li>
<li class="list-inline-item">Projects</li>
<li class="list-inline-item">My Work</li>
<li class="list-inline-item">Feed</li>
</ul></p>
</div>
</div>
</div>
</div>
<hr class="main">
(The attributes main and topsection aren't important, they just style the backgrounds of things etc)
Currently, it looks like this on mobile:
Use the Bootstrap utility classes. Alignment is already responsive...
<div class="topsection">
<div class="container">
<div class="row justify-sm-content-between justify-content-center">
<div class="col-sm col-auto">
<img class="img-responsive" src="//placehold.it/120x50" height="50px">
</div>
<div class="col-sm">
<ul class="list-inline text-sm-right text-center py-2 font1">
<li class="list-inline-item active-nb">Home</li>
<li class="list-inline-item">Projects</li>
<li class="list-inline-item">My Work</li>
<li class="list-inline-item">Feed</li>
</ul>
</div>
</div>
</div>
</div>
Demo
.your-class{
display:flex;
place-content:center;
}
should work with basic css.
I have the following div in Bootstrap:
<div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0">
<div class="d-flex justify-content-between align-items-center">
<div class="h5 mb-0">Text text</div>
<div class="text-right">
<div class="actions">
<a href="#" class="action-item"><i
class="far fa-heart mr-1"></i>
50</a>
<a href="#" class="action-item"><i class="far fa-eye mr-1"></i>
250</a>
</div>
</div>
</div>
<p class="font-size-1">Text text text text text
</p>
</div>
On medium and small devices I would like that the second div having class="actions" to go on top of the first and aligned left.
I have tried so far to do something like below but it doesn't work. Something I'm missing:
#media only screen and (max-width: 960px) {
.col-xs-12 {
display: flex;
flex-direction: column-reverse;
}
}
Some tips? Thanks
Assuming you're using Bootstrap 4:
Bootstrap is built for mobile-first, so the easiest solution is to layout the code in order from the .sm view, which would be the div you want first as the first one in that entire .row.
Here is the section in Bootstrap 4 covering this: https://getbootstrap.com/docs/4.4/layout/grid/#order-classes
You'll have to add .order-lg-2 to the div you want to show first on sm and md screens (remember, mobile first). You can also use things Bootstrap classes like .justify-content-[sm, md, lg]-[start, center, between, end, around] to set its position. You may also have to add .d-flex to the second div (that's how it all worked for me in a project).
Here is an example of what I've used that worked (these sections were side-by-side on lg+, so your column sizes might need to be adjusted):
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 order-lg-2 justify-content-center justify-content-sm-start"> <!-- shows first on sm/md, 2nd on lg -->
<!-- your code -->
</div>
<div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 order-lg-1 justify-content-center justify-content-md-start"> <!-- shows 2nd on sm/md, 1st on lg -->
<!-- more code -->
</div>
</div>
</div>
Here is a quick CodePen I set up to show you how it works:
Codepen
Good day, I am trying to be consistent on the interface aspect of my website. Right now I am trying to make the list in my header become rows if I adjust my screen size to a smaller size. I am stuck in figuring out how to make it into rows if I place multiple links in one div class row. Thanks for any help I can get.
HTML:
<div class="bg-color-white strong">
<div class="container">
<nav>
<div class="row spacer">
<div class="col-md-1">
<div class="logo">
<img src="img/logo_png_solo.png">
</div>
</div>
<div class="col-md-8">
<ul class="list1">
<li>Home</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
<div class="col-md-3">
Sign Out
<hr>
<ul class="list2">
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
</div>
EDIT: what i want is to have all the links automatically be in a row if the screen size is smaller, if I add lg, md, sm three of my links are still in one row.
JS Fiddle: https://jsfiddle.net/61kc2hjx/
<div class="row">
<div class="col col-12 col-sm-10 col-md-8 col-lg-6 col-xl-4"></div>
</div>
The .col div will have full width by default. But as the screen gets larger, the col width will decrease progressively. JSFiddle
Edit #1 :
<div class="col-12 col-md-8">
<div class="list1 row">
<a class="col col-4 col-md-12">Home</a>
<a class="col col-4 col-md-12">FAQ</a>
<a class="col col-4 col-md-12">Contact</a>
</div>
</div>
JSFiddle
This is what I understood from your explanations. But I hope you get the idea.
This is the site - http://jnnce.ac.in/jnncenew/JNNCE%20Website/
It works properly on PCs But in mobile devices the layouts are scrambled and placed randomly.
How do I solve this issue?
Since you use Bootstrap, you could use the bult in classes to ensure a mobile friendly site. In my opinion it is best to start with the mobile site (mobile first). So the html code should look more like this (in my opinion):
<div class="footer">
<div class="row">
<div class="col-md-3 col-12">
<h5>About Us</h5>
<h2>JNNCE</h2>
<address></address>
<ul></ul>
</div>
<div class="col-md-3 col-12">
<h5>Usefull links</h5>
<ul></ul>
</div>
<div class="col-md-3 col-12">
<h5>University Links</h5>
<ul></ul>
</div>
<div class="col-md-3 col-12">
<h5>Facilities</h5>
<ul></ul>
</div>
</div>
</div>
This way you use the bootstrap class col to maintain the mobile structure. The col-12 is for all devices under 540px wide and the col-md-3 is for all devices that are wider. This is one of the reasons bootstrap is widely used, the grid system. Hope this helps!
Cheers, Steven