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.
Related
How can I center text and image?
Here is my code
<div class="container my-5">
<div class="row py-4 justify-content-center">
<div class="col-lg-4 mb-4">
<h1 class="text-dark font-weight-bold mb-3">
We've been expecting you
</h1>
<p class="mb-4">At our core is a collection of design and development solutions</p>
</div>
<div class="col-lg-8"><img src='assets/about.png' class="w-80"></div>
</div>
</div>
I tried to implement justify-center, offset,ml-x ,but nothing seems to work? I've already read the bootstrap library and haven't found anything that could help me
In your row, you have a 4 column wide column and an 8 column wide column, so you’re already taking up the full 12 columns, so the content in the row won’t “center.”
Your image will be whatever width it is as w-80 isn’t a Bootstrap 4 class – try w-75 or add your own class for w-80 (although if the image is only 80% of the column, the column won’t look centered - the content is already taking up the full width).
You could make the two columns 3 & 7, and then use a 1 column offset to have the two columns in the center (with the image at 100% of the 7 column width).
<div class="container my-5">
<div class="row py-4">
<div class="col-lg-3 offset-lg-1 mb-4">
<h1 class="text-dark font-weight-bold mb-3">
We've been expecting you
</h1>
<p class="mb-4">At our core is a collection of design and development solutions</p>
</div>
<div class="col-lg-7"><img src='bg400x240-1.png' class="w-100"></div>
</div>
</div>
I have been working on CSS of footer for my website. I have a grid where the images and footer links are aligned. But in smaller resolution the order of images needs to be changed. I tried using the order class provided by boodstrap, But i havent been getting the results as expected.
I have a footer designed like the following for desktop resolution.
[Image][Image] | Footer Links |[Image]
<text> | Footer Links |
<anchor links> | Footer Links |
For smaller resolution it is :
[Image] | Footer Links
[Image] | Footer Links
[Image] | <text>
<achor links>
I have used the following classes to align it for desktop and it works fine.
<div class="col-lg-5 col-md-12 mb-4 mb-md-0">
<div class="row">
<div class="col-lg-3 col-md-6 mb-4 mb-md-0"><img /></div>
<div class="col-lg-6 col-md-6 mb-4 mb-md-0"><img /></div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 mb-md-0 order-md-2">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5 col-xs-5"></div>
<div class="col-lg-6 col-md-5 col-sm-5 col-xs-5"></div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0 order-md-1">
<img />
</div>
You are using bootstrap row which implies it as display: flex; however, flex is one-dimensional property. Here, what you are trying to achieve is two-dimensional. In such a case using CSS grid is the best course of action. We can use grid-template-areas:''; to control the elements two-dimensionally.
PS: Here I am talking about 1-D and 2-D, where 1-D means controlling elements in either X or Y direction. whereas 2-D means controlling elements in both X and Y direction.
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 am trying to lay 4 elements in a row with a custom horizontal gutter, I tried to put each element in a col with the class of col-md-2 for a certain screen size, and modify the margin-right of each element to my need.. but it didn't look very good, when applying the col-md-3 obviously there is no room for adding a margin to each element, surprisingly when I tried applying col-md-2.5 class, it worked on big screens, however, when I want to have the element span to 10 cols in the smaller screens, it does, but when i go back to the bigger screen, it behaves like the small screen again, Here is my HTML code and i will leave a screenshot down below to illustrate the behavior that I want.
[class^="col"]:not(:last-child){
margin-right: 60px;
}
<div class="container">
<div class="row">
<div class="col col-md-2.5">1</div>
<div class="col col-md-2.5">2</div>
<div class="col col-md-2.5">3</div>
<div class="col col-md-2.5">4</div>
</div>
</div>
<!--I know it may look weird but this above HTML along with the CSS
achieved my goal on the big screens -->
<!-- things get messy again when i do the following to adjust the
view of elements on smaller screens -->
<div class="container">
<div class="row">
<div class="col-10 offset-1 col-md-2.5">1</div>
<div class="col-10 offset-1 col-md-2.5">2</div>
<div class="col-10 offset-1 col-md-2.5">3</div>
<div class="col-10 offset-1 col-md-2.5">4</div>
</div>
</div>
<!-- it works fine in small screen, but when I back to big
screens with this set up, it doesn't give me the initial
behavior and spans every element to columns !!
Here is the screenshot of the desired behavior
thanks in advance!
I don't quite get your problem. Have you just tried simply applying paddings to the left and right of your 4 columns using {property}{sides}-{breakpoint}-{size} notation?
https://getbootstrap.com/docs/4.1/utilities/spacing/#notation
That way you don't have to use offset on your columns. Instead, you can just use col.
For example, if you only want big left and right paddings on large scrren, you can apply px-lg-5 on col class.
<div class="container">
<div class="row">
<div class="col px-lg-5">
...
</div>
<div class="col px-lg-5">
...
</div>
<div class="col px-lg-5">
...
</div>
<div class="col px-lg-5">
...
</div>
</div>
</div>
jsfiddle: http://jsfiddle.net/aq9Laaew/241204/
You're missing your target screen:
<div class="container">
<div class="row">
<div class="col-10 offset-1 col-md-2.5">1</div>
<div class="col-10 offset-1 col-md-2.5">2</div>
<div class="col-10 offset-1 col-md-2.5">3</div>
<div class="col-10 offset-1 col-md-2.5">4</div>
</div>
</div>
Add whichever size you want: xs, sm, md, lg to the col and the offset like this:
<div class="container">
<div class="row">
<div class="col-10 col-sm-offset-1 col-md-2.5">1</div>
<div class="col-10 col-sm-offset-1 col-md-2.5">2</div>
<div class="col-10 col-sm-offset-1 col-md-2.5">3</div>
<div class="col-10 col-sm-offset-1 col-md-2.5">4</div>
</div>
</div>
Here's a reference:
https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
EDIT: It looks like you may have to specify which screen you're targeting when using the offset class. But, you're correct about not needing the other option.
I have a question about the bootstrap 4.1 reordering. According to the documentation:
Reordering
Use .order- classes for controlling the visual order of
your content. These classes are responsive, so you can set the order
by breakpoint (e.g., .order-1 .order-md-2). Includes support for 1
through 12 across all five grid tiers.
I've tried to set the reordering only on small and medium screens, using the .orderclasses as showed in the docs, but it will reorder the contents also on larger breakpoints, I'm doing this wrong?
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-4 order-sm-2">
<!-- some contents here -->
</div>
<div class="col-sm-12 col-lg-8 order-sm-1">
<!-- some contents here -->
</div>
</div>
</div>
You need re-order in larger breakpoints, because bootstrap is mobile first approach, (it means it is using min-width in media queries), so when only using sm it will apply properties from sm and up (including md and 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-12 col-lg-4 order-sm-2 order-lg-1">
mobile 2nd and then desktop 1st
</div>
<div class="col-sm-12 col-lg-8 order-sm-1 order-lg-2">
mobile 1st and then desktop 2st
</div>
</div>
</div>
One more thing to know about order in BS4, is that you can you use order-X-first, order-X-last and order-X-0, so here a snippet with those classes. You can see them in this answer
<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-12 col-lg-4 order-sm-last order-lg-first">
mobile 2nd and then desktop 1st
</div>
<div class="col-sm-12 col-lg-8 order-sm-first order-lg-last">
mobile 1st and then desktop 2st
</div>
</div>
</div>
This is the default behavior of Bootstrap and is expected.
To say it in short words, all bootstrap's breakpoint suffixes (-sm -md ...) work from that breakpoint upward.
So if you set col-sm-6 that means your column will be half the size of row from in sm breakpoint and md and lg unless you overwrite it (e.g. col-md-2 ).
It all goes back here (using min-width in media queries)
Here is an example, how you can do this with media queries:
<div class="row">
<div class="col-12">
<!-- some content -->
</div>
<div class="col-md-9">
<!-- some content -->
</div>
<div class="col-md-3 move-down">
<!-- some content -->
</div>
<div class="col-md-6 move-up">
<!-- some content -->
</div>
<div class="col-md-6">
<!-- some content -->
</div>
</div>
#media (max-width: 767px) {
.move-down {
order: 2;
}
.move-up {
order: 1;
}
}
Have you tried doing order-1, this sets the default for larger screens
<div class="col-sm-12 col-lg-4 order-1 order-sm-2">
<!-- some contents here -->
</div>
<div class="col-sm-12 col-lg-8 order-2 order-sm-1">
<!-- some contents here -->
</div>
Source: Column ordering in Bootstrap 4
I ran into some issues with this as well. Here's the following code that got it to work for me:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 order-sm-2 order-1">
<!-- some contents here -->Content1
</div>
<div class="col-sm-6 order-sm-1 order-2">
<!-- some contents here -->Content2
</div>
</div>
</div>
Edit: Removed .order-md class from respective columns.