If you use grid system in Bootstrap 4.x, it can be useful to know exactly which grid breakpoint corresponds to the current viewport width.
You can accomplish this by adding the following HTML at the top of your page. When you resize the browser window, the corresponding size will be displayed.
<div class="d-block d-sm-none">
<b>Extra Small</b> <576px
</div>
<div class="d-none d-sm-block d-md-none">
<b>Small</b> ≥576px
</div>
<div class="d-none d-md-block d-lg-none">
<b>Medium</b> ≥768px
</div>
<div class="d-none d-lg-block d-xl-none">
<b>Large</b> ≥992px
</div>
<div class="d-none d-xl-block">
<b>Extra Large</b> ≥1200px
</div>
When you resize your browser window, you can see what the current grid breakpoint is. Remeber to remove this when development is done.
Related
I am creating this web portfolio for my web design class and our teacher requires that we use Bootstrap 5 (I wish I could just use HTML and Vanilla CSS). After a lot of tinkering I finally was able to get my elements to respond correctly for desktop, tablet, and mobile device break points. EXCEPT for the "View More" button on lg screen breakpoint; I simply want to place the same style button underneath the "I'm Nate Finn. Graphic Des...." photo in my desktop version without messing up the order of my photos or sending it down below in which it looks like a footer element. (I am very new to this obviously so please excuse my ignorance). I have attached screenshots that included the empty space where I want to center the button and this is my code:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container-fluid">
<div class="row">
<div class="text-center col-lg-7 ms-sm-auto ps-sm-5 pe-sm-5"><img class="img-fluid pt-5" src="image/welcomemsg.png" alt="Welcome Message">
<img class="img-fluid d-none d-lg-block" src="image/blurb.png" alt="I'm Nate Finn"></div>
<div class="text-end col-5 order-lg-1 order-md-2 order-2">
<img class="img-fluid pt-5 float-end" src="image/Resizeme.jpg" alt="Vector Cartoon of Face and Torso"></div>
<div class="text-center col-7 order-lg-2 d-lg-none order-md-1 order-lg-0 ps-sm-5 pe-sm-5">
<img class="img-fluid" src="image/Intro.png" alt="I'm Nate Finn">
<button class="btn btn-dark btn-lg">View More</button></div>
</section>
LG
SM
I tried everything, from documentations, last 10 stack overflow answers, and nothing helped. I tried with:
<meta name="viewport" content="width=device-width, initial-scale=1">
I tried with ##meedia in style, I tried with w-100 on card body, everything and nothing helps. I need whole application like this to have normal width so please help. I have VS 2022 with .NET 6 onboard.
I just cannot make when I start an application (on desktop) and go on F12, put on mobile. The card-body is really long and I want to set width of card-body to mobile screen size. i DO NOT KNOW where is the problem ...
Code is this:
<div class="row">
<div class="col-sm-12">
<div class="card bg-light w-100 p-0">
<div class="card-body">
<a class="nav-link text-dark" asp-area="" asp-controller="Oglas" asp-action="ProdajaKuce">Prodaja kuća</a>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="card bg-light w-100 p-0">
<div class="card-body">
<a class="nav-link text-dark" asp-area="" asp-controller="Oglas" asp-action="ProdajaStanova">Prodaja stanova</a>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="card bg-light w-100 p-0">
<div class="card-body">
<a class="nav-link text-dark" asp-area="" asp-controller="Oglas" asp-action="ProdajaNekretninaZaOdmor">Prodaja nekretnina za odmor</a>
</div>
</div>
</div>
and the final result is still the same. Yup.
Two things, the first one, you need to add m-0 in <div class="row m-0">.
The second one, you have forget a </div> at the end of you source code here upper for close the div for the row.
Edit :
In general, for debug CSS problems, you best friend is the inspector of the web browser.
With this one you can :
Do a right click on the element of you page then click on Inspect.
In the bottom left side, you see the HTML code and the selected element.
In the bottom middle side, you see all CSS for the selected HTML element.
In the bottom right side, you can see the box model with the margin, padding and size.
It's a really helpful tool for debugging HTML/CSS.
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 have this div row that I would like to have adjusted when the window size changes.
<div class="row">
<div class="col-md-12 d-block d-sm-none d-xs-none text-center">
Login
<span class="or-spacer my-auto">or</span>
Register
<br>
<p>to claim this coupon</p>
</div>
<div class="col-md-12 text-left d-none d-md-block d-lg-block d-xl-block">
Login
<span class="or-spacer my-auto">or</span>
Register
<span class="or-spacer my-auto">to claim this coupon</span>
</div>
</div>
I followed the classes in this bootstrap page: https://getbootstrap.com/docs/4.0/utilities/display/
the top div displays on size sm and below and the bottom one shows on size md and above.
The problem is there is a small gap in between md and sm that displays neither of the two. The Login and Register buttons disappear.
md+
between md and sm (no display)
sm-
What can be changed for the no display in between md and sm?
There is no gap between sm and md
sm ranges till 767px while md starts from 768px
Try this :
<div class="row">
<div class="d-none d-md-block">
visible for md and above
</div>
<div class="d-block d-md-none">
visible for sm and below
</div>
</div>
You just needed to change d-sm-none to d-md-none in your sm block:
<div class="row">
<div class="col-md-12 d-block d-md-none d-xs-none text-center">
Login
<span class="or-spacer my-auto">or</span>
Register
<br>
<p>to claim this coupon</p>
</div>
<div class="col-md-12 text-left d-none d-md-block d-lg-block d-xl-block">
Login
<span class="or-spacer my-auto">or</span>
Register
<span class="or-spacer my-auto">to claim this coupon</span>
</div>
</div>
I've (almost) created a responsive navbar however between phone screen size and full window size the bar doubles in height. I've tried a bunch of bootstrap classes without success. This is the full screen format (correct):
And this is after reducing the browser window size (incorrect):
If anyone could tell me what is causing this it would be really helpful.
<!-- header area start -->
<header id="header">
<div class="header-area">
<div class="container">
<div class="row d-flex align-items-center justify-content-between">
<!-- <div class="menu-area"> -->
<div class="">
<div class="logo px-4">
<h3 style="color: #ffffff;"><a style="color: #ffffff;">Header</a></h3>
</div>
</div>
<div class="col-lg-9 d-none d-md-block">
<div class="main-menu">
...
</div>
</div>
<div class="col-md-12 col-12 d-none d-sm-block d-md-none d-block d-sm-none">
<div class="mobile_menu"></div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header area end -->
.header-area{position:fixed;left:0;top:0;width:100%;z-index:998;background-color:#27ae60}
.menu-area{display:flex;align-items:center}
.logo h3{font-family:'Lato',sans-serif;color:#fff}
.logo a{display:inline-block;font-family:'Lato',sans-serif;color:#fff;font-size:18px}
From what I know every immediate child of the row class should typically be a col so that all children equals 12 and assigns the width accordingly. When you say col-lg-9 that means that while we are in a large viewport this div should take up 9/12 width. When it is a viewport below large (lg) we will be the full 12 wide and start to stack. So for example
large
| col-lg-2 | col-lg-6 | col-lg-4 |
medium and small
| col-lg-2 |
| col-lg-6 |
| col-lg-4 |
you can fine tune this with md and sm and customise what happens when it reaches those viewports. I don't think it's a great explanation but I hope it helped. You should try to keep your classes equalling 12 and using the same size lg or md or sm across all of them.