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>
Related
I'm trying to put extra margin space between columns on my Bootstrap grid layout.
I've tried adding custom CSS class like this
.classWithPad {
margin: 10px;
padding: 10px;
}
but didn't solve my problem, also I've tried adding ml-1 and mr-1 but I didn't get desired. Here is my code:
When I tried to add some extra margin/padding the corresponding column is moved to a new row.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="row mt-4 justify-content-between">
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>General Information</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
paragraphs...
</div>
<div class="col-md-6 pl-0 text-right">
paragraphs...
</div>
</div>
</div>
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>Features</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
</div>
<div class="col-md-6 pl-0 text-right">
</div>
</div>
</div>
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>Game Manufacturers</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
</div>
<div class="col-md-6 pl-0 text-right">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
You generally don't want to mix structural and presentation elements. In this case, you've combined columns with cards. Put the cards inside the columns, and if you wanted them full-height you can use h-100 on them.
That, along with the container that should be present around outer rows, and you're all good. If you want more spacing, use px-* classes on the columns.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mt-4 justify-content-between">
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>General Information</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>Features</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>Game Manufacturers</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
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>
so here is my html :
<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-lg-9 col-md-12">
<div class="container">
<div class="row bg-white">
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text">
some texts
<div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text">
some texts
<div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
as you can see i have a column which is set to col-lg-9 col-md-12 which i'm using it to have some sort of post loop in it. and each post gonna be the col-lg-4 col-md-6.
the problem is the first column works fine, it's full screen on medium sized devices but the second column doesn't act like it is expected on small devices. i set it col-md-6 so it will be half of the screen wide on tablets for example and be full screen on mobile phones. but it won't.it will be half of the screen wide on small screens as well.
i also tried to add col-sm-12 but same results again.
i looked diffrent topics,... most people didn't use .row which that isn't my case.
also i tried it without the second container and i got same results.
few days ago i bought a license ,also if you like to use it free you can use it some days and can assist you : pingendo.com
is nice bootstrap but ,sometimes to speed up the things you should get some improvements
..anyway the thinks can look good like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="theme.css" type="text/css">
</head>
<body>
<!--
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
<div class="row " draggable="true">
<div class="col-md-12">
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-12">
<div class="container">
<div class="row bg-white">
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text"> some texts <div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text"> some texts <div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>-->
<!-- i did this with my Pingendo.com licensed -->
<div class="row" draggable="true">
<div class="col-md-6 col-12 col-sm-12 col-lg-6" >
<div class="card" >
<img class="card-img-top" src="https://picsum.photos/600/600?image=1074" alt="Card image">
<div class="card-body text-center">
<h4 class="card-title">John Catel</h4>
<p class="card-text">Some example text.</p>
See Profile
</div>
</div>
</div>
<div class="col-md-6 col-12 col-sm-12 col-lg-6">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/600/600?image=1074" alt="Card image">
<div class="card-body text-center">
<h4 class="card-title">John Catel</h4>
<p class="card-text">Some example text.</p>
See Profile
</div>
</div>
</div>
</div>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 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>
</body>
</html>
Have you tried bootstrap 4 with
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
So I have this section which ocupies the whole width of the screen but the text in it is contained in a container and aligns properly.
The section below that one is divided in two columns, and im interested in putting a text in the left column that aligns with the text above it but so far have been unable to do so.
This is the result I'm getting:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="d-flex align-items-center bg-primary" style="min-height: 450px">
<div class="container">
<h1 class="">TITLE TEXT</h1>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row">
<div class="col-sm bg-secondary" style="min-height: 400px">
<div class="container">
<h3>TITLE</h3>
</div>
</div>
<div class="col-sm bg-warning" style="min-height: 400px"></div>
</div>
</div>
</section>
And the HTML I'm currently stuck with(The css was just added in the HTML for testing)
Tank you for any help provided and if you need anything more please just tell me.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="row bg-primary" style="min-height: 450px">
<div class="col-6 d-flex align-items-center">
<div class="container">
<h1 class="text-center">TITLE TEXT</h1>
</div>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row" style="min-height: 400px">
<div class="col-6 d-flex align-items-center bg-secondary">
<div class="container">
<h3 class="text-center">TITLE</h3>
</div>
</div>
<div class="col-6 bg-warning"></div>
</div>
</div>
</section>
.text-to-center{ display:flex}
h1,h3{ margin:auto;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="row bg-primary" style="min-height: 450px">
<div class="col-12 d-flex align-items-center">
<div class="container text-to-center">
<h1 class="text-center">TITLE TEXT</h1>
</div>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row" style="min-height: 400px">
<div class="col-6 d-flex align-items-center bg-secondary">
<div class="container text-to-center">
<h3 class="text-center">TITLE</h3>
</div>
</div>
<div class="col-6 bg-warning"></div>
</div>
</div>
</section>
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>