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.
Related
I am using using vue3 bootstrap 5 and some css, struggling for days, What I am trying to day is to make the middle div scrollable except and 1st column and the 3rd column.
This is what it looks like:
I have 3 columns, I want only the 2nd column to be scrollable so the search filter and promotion component will stay in their place.
Here is my html:
<template>
<app-layout-component v-show="navbar_visible" #navbar-ref="setNavbarRef"></app-layout-component>
<div class="row">
<div class="d-sm-none d-md-block mt-3"></div>
<div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 home-left">
<searchbox-component :searchboxclass="searchbox_class" #searchbox-ref="setSearchboxRef"></searchbox-component>
<filters-component></filters-component>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 home-center">
<profile-posts-component :profilepost="null" :filter="filter"></profile-posts-component>
</div>
<div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 home-right">
<promotion-component></promotion-component>
</div>
</div>
</template>
I'm trying to create a div that takes up 8 columns, centered, in a large viewport, and takes up all 12 columns, centered, in all other viewports.
I tried to achieve this with justify-content-center, but for some reason it is not centering the content on small viewports:
Large viewports: content is centered as expected:
Small viewports: content is off-center slightly:
Here is the code:
<div class="row container-fluid justify-content-center">
<div class="main-container p-3 m-3 col-lg-8">
(text)
</div>
</div>
I was able to achieve the desired effect with the following:
<div class="container-fluid">
<div class="row justify-content-center p-3">
<div class="main-container p-3 col-lg-8">
(text)
</div>
</div>
</div>
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 (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.
In my post section of the web site which I am creating I have 4 columns with post in each post with different height based on it's contents . bootstrap 4 grid system. As per photo under
When I resize the 4th column re-arrange.
As u can see on the above image the 4th column is shifted under number 1 but its align base on the height of the 3rd column. I want to be stacked like the photo bellow.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row pt-3 port-folio-margins pb-5 pr-4 pl-4">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
</div>
So the question is how to achieve that CSS formatting with Bootstrap or without bootstrap . I have tried putting "float" using "flex wrap" also "clearfix" without result.
Bootstrap has a built in utility for this problem you can use cards and wrap them in card columns. See the documentation here
This is a tricky issue that is often just worked around. Web-pages are much easier to code in grids, so things tend to be in columns and rows. In your example, when wrapped the row needs to be tall enough to contain your third item. That means that if the fourth item sat where you want it, it would be within the cell of the first item.
You can use something like Masonary, which I believe calculates top and left positions as you resize. Or I think you can use flex and a whole lot of wrapper divs, but that will get messy and be horrible maintenance. It's so messy I've never got it into production, either because I lost my mind trying, or hated the thought of maintaining it when it was working in just a small example.
Masonary allows a fairly simple layout
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
</div>
JSFiddle example