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>
Related
I'm following this video tutorial https://www.youtube.com/watch?v=36jRXMsIFuA
I am using bootstrap 5.0.0 beta 1
My code is following:
<header>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-12 bg-light">
<div class="btn-group">
<button class="btn border dropdown-toggle my-md-4 my-2" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">AUD</button>
<div class="dropdown-menu">
USD
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center bg-dark"></div>
<h2 class="my-md-3 site-title">Online Store</h2>
<div class="col-md-4 col-12 text-right bg-danger">
<p class="my-md-4 header-links">
Sign In
Create an Account
</p>
</div>
</div>
</div>
</header>
And it looks like this, and when I click the button there is no dropdown. Layout is messed up as well.
my website
Compared to tutorial:
tutorial picture
The tutorial's using Bootstrap 4.3.1, the 4th version rather than the newest 5.0. If you switch to v4, your dropdown would works. Since a major update of a framework (increase of the first version number) is always not compatible to below versions.
About the layout, there's a mistake in your code. You need to put your <h2> tag within the tag with a background color and a style, the above <div> tag.
So, change the lines below:
<div class="col-md-4 col-12 text-center bg-dark"></div>
<h2 class="my-md-3 site-title">Online Store</h2>
To:
<div class="col-md-4 col-12 text-center bg-dark">
<h2 class="my-md-3 site-title">Online Store</h2>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<header>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-12 bg-light">
<div class="btn-group">
<button class="btn border dropdown-toggle my-md-4 my-2" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">AUD</button>
<div class="dropdown-menu">
USD
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center bg-dark">
<h2 class="my-md-3 site-title">Online Store</h2>
</div>
<div class="col-md-4 col-12 text-right bg-danger">
<p class="my-md-4 header-links">
Sign In
Create an Account
</p>
</div>
</div>
</div>
</header>
I'm having an issue where the card div tags are not the same height. It seems to work when I use container, then row, then col then cards like so:
<div class="container-fluid">
<div class="row">
<div class="col-12 mt-3">
<div class="card">
Card content
</div>
But I would prefer to have the whole lot in a card, I think think it looks a little better.
Thanks
<div class="container-fluid">
<div class="row">
<div class="col-12 mt-3">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-5">
<div class="card-deck">
<div class="card">
<div class="card-header">
Card Header
</div>
<div class="card-body">
Card body 5
<p> Text</p>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<div class="card-deck">
<div class="card">
<div class="card-header">
Card Header
</div>
<div class="card-body">
Card body
</div>
</div>
How it looks on the webpage
Give height: 100%; to .card-deck class, it will take the maximum height of cards and take the same height of both cards.
Try This:
.card-deck{
height: 100%;
}
<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>
<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-fluid">
<div class="row">
<div class="col-12 mt-3">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-5">
<div class="card-deck">
<div class="card">
<div class="card-header">
Card Header
</div>
<div class="card-body">
Card body 5
<p> Text</p>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<div class="card-deck">
<div class="card">
<div class="card-header">
Card Header
</div>
<div class="card-body">
Card body
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I would like to developt this grid layout as you can see in the figure:
Basically there is an header, then there is the content within 3 columns, and the content is diviede by a sort of full width row with a middle text inside.
What would be the right bootstrap 4 structure to obtain this ?
I have tried to search the docs but found nothing.
I thought something like this:
<div class="container">
<div class="row">
<div class="col">content</div>
<div class="col">content</div>
<div class="col">content</div>
</div>
</div>
<div class="bg-dark py-4 my-4">
<div class="container h-100">
<div class="row h-100 align-items-center text-white">
<div class="col-lg-12 text-center">
<p>Middle Text</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">content</div>
<div class="col">content</div>
<div class="col">content</div>
</div>
</div>
...etc...
But i don't know if opening and closing a div container for the content is good each time
Thanks
Here's some example using the bootstrap 4 layout grid, and the spacing.
Containers provide a means to center and horizontally pad your site’s
contents. Use .container for a responsive pixel width or
.container-fluid for width: 100% across all viewport and device sizes.
I add some colors to be more like your example.
I recommend you to read the Bootstrap documentation
It's very complete and will help you a lot with your next projects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 4</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="pb-2 mt-4 mb-2 border-bottom bg-primary">
<div class="container">
<h1 class="ml-5 ">Site title</h1>
</div>
</div>
<div class="container">
<div class="row container">
<div class="col-1"></div>
<div class="col-3 col-md m-1 bg-secondary">
<br>
<p>CONTENT</p>
<br>
</div>
<div class="col-3 col-md m-1 bg-secondary">
<br>
<p>CONTENT</p>
<br>
</div>
<div class="col-3 col-md m-1 bg-secondary">
<br>
<p>CONTENT</p>
<br>
</div>
<div class="col-1"></div>
</div>
</div>
<div class="row container-fluid mt-3">
<div class="col-12 col-md bg-light text-center">
<p>MIDDLE TEXT</p>
</div>
</div>
<div class="container">
<div class="row container">
<div class="col-1"></div>
<div class="col-3 col-md m-1 bg-secondary">
<br>
<p>CONTENT</p>
<br>
</div>
<div class="col-3 col-md m-1 bg-secondary">
<br>
<p>CONTENT</p>
<br>
</div>
<div class="col-3 col-md m-1 bg-secondary">
<br>
<p>CONTENT</p>
<br>
</div>
<div class="col-1"></div>
</div>
</div>
<div class="row container-fluid mt-3">
<div class="col-12 col-md bg-light text-center">
<p>MIDDLE TEXT</p>
</div>
</div>
<div class="container">
<div class="row container">
<div class="col-1"></div>
<div class="col-3 col-md m-1 bg-secondary">
<br>
<p>CONTENT</p>
<br>
</div>
<div class="col-3 col-md m-1 bg-secondary">
<br>
<p>CONTENT</p>
<br>
</div>
<div class="col-3 col-md m-1 bg-secondary">
<br>
<p>CONTENT</p>
<br>
</div>
<div class="col-1"></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>
</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've got these divs that I would like to align in their container in a 4 by 6 grid. I've got this code for the first row:
<div class="container-fluid">
<div class="swb col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="swb-button col-xs-3">
<p class="swb-button-name">1</p>
</div>
<div class="swb-button col-xs-3">
<p class="swb-button-name">2</p>
</div>
<div class="swb-button col-xs-3">
<p class="swb-button-name">3</p>
</div>
<div class="swb-button col-xs-3">
<p class="swb-button-name">4</p>
</div>
</div>
</div>
</div>
but they're clumping together like so:
Since they are 3 bootstrap widths wide, they should be spacing out.
What am I doing wrong?
Just change col-xs-3 to col-sm-3. If you want them to go completely across the screen get rid of your second div. col-xs-* no longer exists in the latest v4 release.
<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>
<div class="container-fluid">
<div class="swb col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="swb-button col-sm-3">
<p class="swb-button-name">1</p>
</div>
<div class="swb-button col-sm-3">
<p class="swb-button-name">2</p>
</div>
<div class="swb-button col-sm-3">
<p class="swb-button-name">3</p>
</div>
<div class="swb-button col-sm-3">
<p class="swb-button-name">4</p>
</div>
</div>
</div>
</div>