I just have a quick questions since I'm stuck with this for like 3 hours now and can't figure it out.
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<html>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-auto">
<h1>TOP</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-auto">
<h1>LEFT</h1>
</div>
<div class="col-md-auto">
<h1>RIGHT TOP</h1>
</div>
<div class="col-md-auto">
<h1>RIGHT BOTTOM</h1>
</div>
</div>
</div>
</body>
</html>
It should align like this
This aligns horizontally just fine, but how do I center it on the site now vertically and make the alignment like in the picture?
Is this what you are trying to do?
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<style>
.container,
.row,
.col {
border-style: solid;
}
</style>
<html>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-auto">
<h1>TOP</h1>
</div>
</div>
<div class="row">
<div class="col">
<h1>Empty</h1>
</div>
<div class="col">
<div class="row">
<h1>RIGHT Top</h1>
</div>
<div class="row">
<h1>RIGHT Bottom</h1>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I have used following strategy: Dividing it into two equal columns col-md-6. Again splitting col-md-6 into 3 columns each i.e. col-md-4. Same for right side. but problem occurs that how to do even spacing between columns on right side.
My code
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="col-md-4 text-center">
<p>My Earning</p>
</div>
<div class="col-md-4 text-center">
<h5>100</h5>
<p>Number of Notes Sold</p>
</div>
<div class="col-md-4 text-center">
<h5>$10,000</h5>
<p>Money Earned</p>
</div>
</div>
<div class="col-md-6">
<div class="col-md-4 ">
<h5>38</h5>
<p>My Downloads</p>
</div>
<div class="col-md-4">
<h5>12</h5>
<p>My Rejected Notes</p>
</div>
<div class="col-md-4 data">
<h5>102</h5>
<p>Buyer Requests</p>
</div>
</div>
</div>
</div>
Based on your design I just created the same kind of layout. I used grid-based we can use flex also.
I added the gutter also.
I think this will help you.
.row div div{
border: 1px solid #000;
text-align:center;
}
.row .no-gutters{
padding:0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-2 no-gutters">
<div>one</div>
</div>
<div class="col-sm-4 no-gutters">
<div>two</div>
</div>
<div class="col-sm-2">
<div>three</div>
</div>
<div class="col-sm-2">
<div>four</div>
</div>
<div class="col-sm-2">
<div>five</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I have bootstrap page like this
<div class='container'>
<div class='row'>
<div class='col-sm-6 col-md-4 col-lg-3'>
<p>column1</p>
</div>
<div class='col-sm-6 col-md-4 col-lg-3'>
<p>column2</p>
</div>
<div class='col-sm-6 col-md-6 col-lg-4'>
<p>column3</p>
</div>
<div class='col-sm-2 col-md-2 col-lg-1'>
<button type="button">Button</button>
</div>
</div>
</div>
looks like this when pc
1 row
--------------------------------
|column1|column2|column3|button|
--------------------------------
but I want to change like this when Ipad
Horizontal display mode (1024px)
2 rows
--------------------------------
|column1| |button|
--------------------------------
|column2|column3|
--------------------------------
Is this possible? I tried to use pull-right, text-right, justify-content-end
but it didn't work.
Here is the pure bootstrap solution for your problem, just play with the existing classes, and I have given then BG color just for demo purpose, you can remove it. Enjoy,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class='container'>
<div class='row'>
<div class='col-xl-4 col-6' style="background-color: red">
<p>column1</p>
</div>
<div class='col-xl-1 col-6 order-xl-3 text-right text-xl-left' style="background-color: yellow">
<button type="button">Button</button>
</div>
<div class='col-xl-7 order-xl-2' style="background-color: green">
<div class="row">
<div class='col-6'>
<p>column2</p>
</div>
<div class='col-6'>
<p>column3</p>
</div>
</div>
</div>
</div>
</div>
You can change the structure as you want button and column 1 in same line and column 2 , 3 in same row as following.
<div class='container'>
<div class='row'>
<div class='col-sm-6 col-md-4 col-lg-3'>
<p>column1</p>
</div>
<div class='col-sm-2 col-md-2 col-lg-offset-8 col-lg-1'>
<button type="button">Button</button>
</div>
</div>
<div class='row'>
<div class='col-sm-6 col-md-4 col-lg-3'>
<p>column2</p>
</div>
<div class='col-sm-6 col-md-6 col-lg-4'>
<p>column3</p>
</div>
</div>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Your title here</title>
</head>
<div class="row">
<div class="col-sm-12">
**Button**
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I want to make the text in the blue column div align on the right side just like the red div, but text-right does not seem to work. I also want the letters to keep sticking together like they do now: [I]|dashboard
This is my html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 text-right color1setter">
test
</div>
<div class="col-md-3 text-right color2setter">
<div class="row no-gutters">
<div class="col-md-auto ">
[I]
</div>
<div class="col-md-auto ">
|
</div>
<div class="col-md-auto">
Dashboard
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
As your auto columns have no width, they are all bunching on the left of your row - add ml-auto (margin-left: auto) class to the first auto col and it will push everything to the right:
<div class="container">
<div class="row">
<div class="col-md-3 text-right color1setter">
test
</div>
<div class="col-md-3 text-right color2setter">
<div class="row no-gutters">
<div class="col-md-auto ml-auto"> <!-- add ml-auto class here -->
[I]
</div>
<div class="col-md-auto ">
|
</div>
<div class="col-md-auto">
Dashboard
</div>
</div>
</div>
</div>
</div>
Example bootply
Bootstrap auto-margins
Colors to the background of your divs were added so as to show the group staying together, using float right for the group.
<div class="container">
<div class="row">
<div class="col-md-3 text-right color1setter" style="background-color: darkred; color: aliceblue">
test
</div>
<div class="col-md-3 text-right color2setter" style="background-color: red">
<div class="row no-gutters" style="float: right;">
<div class="col-md-auto " style="background-color: violet">
[I]
</div>
<div class="col-md-auto " style="background-color: blueviolet">
|
</div>
<div class="col-md-auto" style="background-color: purple;">
Dashboard
</div>
</div>
</div>
</div>
I tried looking this up here but I can't find anything related to this specific problem.
I'm trying to make a header which has a button on the left and right of the screen with a logo in the middle, but whenever I make the window smaller or larger the button on the right doesnt stay aligned.
Small window
Large window
Here is the code:
<header>
<div id="container-fluid">
<div class="row">
<div class=" col-2">
Menu
</div>
<div class="col-8 text-center ">
Logo
</div>
<div class="col-2 float-right">
Contact
</div>
</div>
</div>
</header>
What am I missing here?
Thanks in advance.
Fixed it, code now looks like this:
<body>
<header>
<div id="container-fluid">
<div class="row">
<div class="col">
<span class="float-left">Menu</span>
</div>
<div class="col text-center">
Logo
</div>
<div class="col">
<span class="float-right">Contact</span>
</div>
</div>
</div>
</header>
</body>
wrap your content so it can be aligned according to the parent container.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<header>
<div id="container-fluid">
<div class="row">
<div class="col-2">
<span class="float-left">Menu</span>
</div>
<div class="col-8 text-center">
Logo
</div>
<div class="col-2">
<span class="float-right">Contact</span>
</div>
</div>
</div>
</header>
You can use the flex-bootstrap-class and justify-content for this approach:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row d-flex justify-content-between bg-light">
<div class="p-2 bg-dark text-light">
Menu
</div>
<div class="p-2 bg-dark text-light">
Logo
</div>
<div class="p-2 bg-dark text-light">
Contact
</div>
</div>
</div>
You havn't defined what size of column grid you are using. Using col-xs,col-sm, col-md,col-lg will have different effects for the particular code. Run the snippet code in full page below and see how the col-size affects when the browser is resized.
Update - Bootstrap 4 has replaced the col-xs with col- .
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="container-fluid">
Col:xs
<div class="row">
<div class=" col-2">
Menu
</div>
<div class="col-8 text-center ">
Logo
</div>
<div class="col-2 float-right">
Contact
</div>
</div>
</div>
<br>
<br>
<div id="container-fluid">
Col:sm
<div class="row">
<div class=" col-sm-2">
Menu
</div>
<div class="col-sm-8 text-center ">
Logo
</div>
<div class="col-sm-2 float-right">
Contact
</div>
</div>
</div>
<br>
<br>
<div id="container-fluid">
Col:md
<div class="row">
<div class=" col-md-2">
Menu
</div>
<div class="col-md-8 text-center ">
Logo
</div>
<div class="col-md-2 float-right">
Contact
</div>
</div>
</div>
<br>
<br>
<div id="container-fluid">
Col:lg
<div class="row">
<div class=" col-lg-2">
Menu
</div>
<div class="col-lg-8 text-center ">
Logo
</div>
<div class="col-lg-2 float-right">
Contact
</div>
</div>
</div>
I have 3 col-md-4(1) col-md-4(2) col-md-4(3) in col-md-12. In mobile or tablet. I want to show middle col-md-4(2) first and then col-md-4(1) col-md-4(3). How to do this properly with respect to bootstrap?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<p>abcd</p>
</div>
<div class="col-md-4">
<p>xyzs</p>
</div>
<div class="col-md-4">
<p>mnop</p>
</div>
</div>
</div>
</div>
Reorder the first two columns and use col-xx-push and col-xx-pull to reposition on larger screens:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4 col-md-push-4">
<p>Column 2</p>
</div>
<div class="col-md-4 col-md-pull-4">
<p>Column 1</p>
</div>
<div class="col-md-4">
<p>Column 3</p>
</div>
</div>
</div>
</div>
You can not use push and pull when your columns are full width (in your case, below md) so you must have them in the correct order in the DOM to start with.