I have a problem with columns on bootstrap, I don't find how resolves my problem.
I would like it to look like its on pc :
and on mobile :
with the following row and columns,
someone has an idea how doing it ?
<div class="container">
<div class="col-sm-4">
1
</div>
<div class="col-6">
2
</div>
<div class="col-sm-4">
3
</div>
</div>
You can set the order using the Bootstrap order classes order-* and order-sm-*.
In your example:
Column 1 - we don't need to give this a class as it's always in the position it was created in.
Column 2 is order-sm-2 order-3 so it appears 2nd on screens bigger than 576px, and 3rd on all others.
Column 3 isorder-sm-3 order-2 so it appears 3rd on screens bigger than 576px, and 2nd on all others.
Example with sm breakpoint:
.row div {
border: 1px solid #ccc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row justify-content-center">
<div class="col-4 col-sm-4"> 1 </div>
<div class="col-sm-4 col-6 order-sm-2 order-3"> 2 </div>
<div class="col-4 col-sm-4 order-sm-3 order-2"> 3 </div>
</div>
</div>
Example with large breakpoint using exactly the same classes except using a larger breakpoint, so you can compare the results in the snippet:
.row div {
border: 1px solid #ccc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row justify-content-center">
<div class="col-4 col-lg-4"> 1 </div>
<div class="col-lg-4 col-6 order-lg-2 order-3"> 2 </div>
<div class="col-4 col-sm-4 order-lg-3 order-2"> 3 </div>
</div>
</div>
Related
I am creating a website, i am beginner in web design i want to create a design of category to be showed 4 cards in desktop and 2 card in mobile view.
My code below
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="categories-main">
<div class="container bg-light rounded">
<br>
<div class="h4 font-weight-bold text-center py-2">Categories</div>
<br>
<div class="row">
<div class="col-lg-3 col-md-6 my-lg-2 my-2">
<div class="box bg-white">
<div class="d-flex align-items-center">
<div class="rounded-circle mx-3 text-center d-flex align-items-center justify-content-center blue"> <img src="#" alt=""> </div>
<div class="d-flex flex-column"> <b>Public Speech</b>
<a href="#">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<br> Categories
<br>
I tried a lot of changes but didn't get what i want.
I expect from developers to help in this.
Refering to bootstrap documentation, max columns numbers are 12.
So you need to make col-6 col-6 for mobile (will make 2 columns (12/2 = 6)) and for desktop col-3 col-3 col-3 col-3 (will make 4 columns (12/4 = 3)).
See simplified example below:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row">
<div class="col-6 col-lg-3 my-lg-2 my-2">
<div class="box bg-red">
1
</div>
</div>
<div class="col-6 col-lg-3 my-lg-2 my-2">
<div class="box bg-blue">
2
</div>
</div>
<div class="col-6 col-lg-3 my-lg-2 my-2">
<div class="box bg-green">
3
</div>
</div>
<div class="col-6 col-lg-3 my-lg-2 my-2">
<div class="box bg-black">
4
</div>
</div>
</div>
You have 12 columns by default.
You can write something like this <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
12/3 = 4 in a row when screen is xl
12/4 = 3 in a row when screen is lg
12/6 = 2 in a row when screen is md
12/12= 1 in a row when screen is sm
You can customize the columns depending on the devices as you want. :)
I have an issue with bootstrap columns and can't seem to resolve swapping the order on smaller devices. I don't want these to stack because they stay a single row on desktop, tablet and mobile. However, on Desktop and tablet I want the row in the default order like this:
Logo Menu Button
But on phones, I simply want the first two columns swapped, like so:
Menu Logo Button
How can I achieve a simple reverse of the columns while keeping the row?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-6 col-xs-4 col-xs-order-2">
Logo
</div>
<div class="col-lg-6 col-xs-4 col-xs-order-1">
Menu
</div>
<div class="col-xs-4 hidden-lg col-xs-order-3">
Button
</div>
</div>
</div>
Update:
screenshot of current result
The issue is that Bootstrap-4 dropped the order-xs class as it is the default class. If you want to apply changes for only xs-classes you have to change the roder for all elements and use order-sm--class to correct the order at sm-width:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-6 col-xs-4 order-2 sm-order-1">
Logo
</div>
<div class="col-lg-6 col-xs-4 order-1 sm-order-2">
Menu
</div>
<div class="col-xs-4 hidden-lg order-3 sm-order-3">
Button
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-4">
Menu
</div>
<div class="col-lg-4 col-md-4 col-xs-4 order-sm-first">
Logo
</div>
<div class="col-lg-4 col-md-4 col-xs-4 hidden-lg">
Button
</div>
</div>
</div>
Here is my bootstrap code so far:
<div class="container-flex">
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
</div>
A simple 4 column setup. Currently it breaks into single column on large (lg class) breakpoint. Is there any way I can set it up so it breaks into two columns on large breakpoint then into one column on medium (md class ) breakpoint? I've been looking over bootstrap tutorials and can't find any solution.
Here's my jsfiddle: https://jsfiddle.net/noe562h0/
Try this
<div class="container-flex">
<div class="row">
<div class="col-12 col-md-6 col-lg-3">1</div>
<div class="col-12 col-md-6 col-lg-3">2</div>
<div class="col-12 col-md-6 col-lg-3">3</div>
<div class="col-12 col-md-6 col-lg-3">4</div>
</div>
</div>
Here are Bootstrap 4 grid references Bootstrap and w3schools.com documentation.
If you want to break differently, you have to use different breakpoint. Like this:
<div class="container-flex">
<div class="row">
<div class="col-lg-6 col-md-12">1</div>
<div class="col-lg-6 col-md-12">2</div>
<div class="col-lg-6 col-md-12">3</div>
<div class="col-lg-6 col-md-12">4</div>
</div>
</div>
Check the below fiddle:
Grid Breakdown
https://jsfiddle.net/x4rjp1gq/
<div class="container-flex">
<div class="row">
<div class="col-lg-3">
<div class='col'>1</div>
<div class='col'>2</div>
</div>
<div class="col-lg-3">
<div class='col'>3</div>
<div class='col'>4</div>
</div>
</div>
</div>
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
text-align:center;
}
I am trying to make a responsive web-layout like :
Upon resizing I would want the skills to be next to one another underneath the intro:
The problem is mainly at the intro and skill boxes, I can't seem to get them to adjust the way I want: https://jsfiddle.net/aq9Laaew/20858/
HTML:
<div class="container">
<div class="row">
<div class="col text-center">HEAD</div>
</div>
<div class="row">
<div class="col">
INTRO
</div>
<div class="col p-0">
<div class="col m-0">SKILLS</div>
<div class="col m-0">SKILLS</div>
<div class="col m-0">SKILLS</div>
</div>
</div>
<div class="row">
<div class="col">
EDUCATION
</div>
<div class="col">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col">OTHER</div>
</div>
</div>
CSS:
.row {
background: #f8f9fa;
margin:10px;
}
.col {
border: solid 1px #6c757d;
margin: 10px;
}
.row, .col {
min-width: 120px;
}
They keep setting underneath each other which i only want when the screen is extra small. this is simple but i just cant figure it out...
I tried adding col-4 for intro (since intro should expand wider than skill) and messed with the columns more on the skill box to no luck..
There are a few issues that are preventing you from getting the desired layout:
cols must be the immediate child of a row ... the skills need to be wrapped in another row.
Use col-sm to allow columns to stack vertically on the smaller layout.
Don't adjust margins on the rows or cols as it will break the way the grid works.
Working demo: https://www.codeply.com/go/0g48AjUW4E
<div class="container">
<div class="row">
<div class="col p-0 text-center">HEAD</div>
</div>
<div class="row">
<div class="col-sm p-0">
INTRO
</div>
<div class="col-md-auto p-0">
<div class="row no-gutters">
<div class="col col-sm col-md-12">SKILLS</div>
<div class="col col-sm col-md-12">SKILLS</div>
<div class="col col-sm col-md-12">SKILLS</div>
</div>
</div>
</div>
<div class="row">
<div class="col p-0">
ED
</div>
<div class="col p-0">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col p-0">OTHER</div>
</div>
</div>
CSS:
.row {
background: #f8f9fa;
}
.col,.col-sm {
border: solid 1px #6c757d;
}
First, when you separate into multiple cols you should wrap them inside a row ( so you have display:flex )
Second, you need to add classes to your columns to set how you want them to appear on different screen sizes. Note that as of bootstrap4 col-xs does not exist. Use col simple instead and overwrite it on larger screens.
In the example below i have used:
col-lg-8 and col-12 on the INTRO section.
col-lg-4 and col-12 on the Skills column wrapper.
col-lg-12 and col-4 on the Skills columns.
Also added a row to wrap the Skills columns
See below or jsFIddle
.row {
background: #f8f9fa;
margin: 10px;
}
[class*="col-"] {
border: solid 1px #6c757d;
}
.row,
[class*="col-"] {
min-width: 120px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col text-center">HEAD</div>
</div>
<div class="row">
<div class="col-lg-8 col-12">
INTRO
</div>
<div class="col-lg-4 col-12 p-0">
<div class="row mx-0">
<div class="col-lg-12 col-4 m-0">SKILLS</div>
<div class="col-lg-12 col-4 m-0">SKILLS</div>
<div class="col-lg-12 col-4 m-0">SKILLS</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
EDUCATION
</div>
<div class="col">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col">OTHER</div>
</div>
</div>
You need to wrap skill boxes in a div and give it classes d-flex
flex-wrap
By doing this, you will get the result without giving negative margin
col-md-8 col-sm-12 classes in intro div will make it 100% for
smaller device
No need to make any css changes
.row {
background: #f8f9fa;
margin:10px;
}
.col {
border: solid 1px #6c757d;
margin: 10px;
}
.row, .col {
min-width: 120px;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col text-center">HEAD</div>
</div>
<!-- Changes here -->
<div class="row">
<div class="col-md-8 col-sm-12">
INTRO
</div>
<div class="col p-0">
<div class="d-flex flex-wrap">
<div class="col-4 col-md-12 m-0">SKILLS</div>
<div class="col-4 col-md-12 m-0">SKILLS</div>
<div class="col-4 col-md-12 m-0">SKILLS</div>
</div>
</div>
</div>
<!-- Changes Ends here -->
<div class="row">
<div class="col">
EDUCATION
</div>
<div class="col">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col">OTHER</div>
</div>
</div>
I would use a media query for this.
https://www.w3schools.com/css/css3_mediaqueries.asp
That is, keep your layout how you want it now as it is, then in the media query, just rearrange the layout to what you want it become on screen re-size.
I am using Bootstrap grid as follows:
<div class="row">
<div class="col-md-6 col-sm-12"> Column A </div>
<div class="col-md-6 col-sm-12"> Column B </div>
</div>
Which obviously shows Column A on the left and Column B on the right.When move to smaller screens it will be A on top and B below.
Is there a way to keep A on the left and B on the right on larger screens, but let B be on top and A below on small screens?
Thank you.
You can use Bootstrap Push and Pull.
body,
html {
padding-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
<div class="row">
<div class="col-md-6 col-md-push-6">
<div class="alert alert-info">B</div>
</div>
<div class="col-md-6 col-md-pull-6">
<div class="alert alert-danger">A</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 hidden-sm hidden-xs"> Column A </div>
<div class="col-md-6 col-sm-12"> Column B </div>
<div class="col-sm-12 col-xs-12 hidden-lg hidden-md"> Column A </div>
</div>
you can add a duplicate column from A after B.
Hide the first A when the screen is sm or xs.
And hide the second A when screen is lg or md.