i code a navbar and use bootstrap for that with this code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=divice-width ,intial-scale=1">
<title>complete bootstrap 4 website layout</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/popper.min.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
</head>
<body>
<!--navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<img src="img/mehrlogo.png" alt="">
</div>
</nav>
</body>
</html>
i wanna set my logo to left of browser but it wont
what the problem
Bootstrap 4
Note that the Bootstrap4 docs use the div tag with the float class.
https://getbootstrap.com/docs/4.0/utilities/float/
It won't work for a tag.
Bootstrap less that 4
<a href="" class="navbar-brand float-left">
I notice that you have added a float-left class in the anchor tag.
As far as I know, there is no class in Bootstrap as float-left.
You can simply define your own class.
<style>
.float-left {
float:left;
}
</style>
Hope you find it helpful :)
This is a bad practice you are doing because under navbar .container-fluid not using because this is a container where we have to put some other class like row col and etc
<!--navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<img src="img/mehrlogo.png" alt="">
</div>
</nav>
The good practice is simply use bootstrap navbar which is available on many resource from the internet the simple navbar example given below and in bootstrap.min.css file there are many css class just call class name to use in your project.
If you use this code then no need to set float left and float right just use logo under navbar brand with img tag
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
you can use list to do that it is very sample like
<!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">
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<ul class="mr-auto mb-0 pl-0">
<img src="https://res.cloudinary.com/nalabdou/image/upload/v1585057140/user.png" style="width:35px;height:35px"/>
</ul>
</nav>
<!-- 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>
We think your logo is an i tag; add this class
<i class="mr-auto"></i>
If your logo is not an i tag, you can use this piece of code too; tags like img,div etc.
Related
I am working on a navbar and I need to align some part of it to the right:
This is what i have :
Also the collapse-navbar is not working , when I reduce the screen the collapse button appears but nothing happens when I click...
This is my codebase : Codebase
Here is a working example with Bootstrap, hope it is to any help:
.test {
color: white;
margin-left: 10px;
}
<!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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div id="app" class="container-fluid">
<nav class="navbar navbar-expand-md navbar-light bg-dark">
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<h1 class="test" href="#">Funds.</h1>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="test" href="#">Use funds for business </a>
</li>
<li class="nav-item">
<a class="test" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="test" href="#">Legal stuff</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
I am new to bootstrap and I need to use bootstrap 4 for creating a fully responsive menu. The main navigation should use bootstrap collapsible navbar to show a hamburger icon atthe smaller screen widths. I found a smaple code from w3 which gives me a menu in the right side and when I resize to small view the harmber icon (the toggle view) appears on the right side:
<!DOCTYPE html>
<html lang="en">
<!-- head includes title of page, meta data and Style links -->
<head id="head">
<title> Home page </title>
<meta charset="utf-8"/>
<!-- link to use bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- link to reset css -->
<link rel="stylesheet" href="css/reset.css"/>
<!-- link to css folder -->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<div class="navbar-brand"></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Basket</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Checkout</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<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>
</body>
</html>
if I remove the dummy <div class="navbar-brand"></div> just before the toggle button then in small screens view, the toggle button would jump to left rather right.
What is the proper way of setting the alignment of toggle button to right instead of left without using the dummy hacky div
<div class="navbar-brand"></div>
Thanks for your help.
Try this Jsfiddle link.
Here I have applied justify-content: flex-end !important; css rule for navbar.
.navbar {
justify-content: flex-end !important;
}
<!DOCTYPE html>
<html lang="en">
<!-- head includes title of page, meta data and Style links -->
<head id="head">
<title> Home page </title>
<meta charset="utf-8"/>
<!-- link to use bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- link to reset css -->
<link rel="stylesheet" href="css/reset.css"/>
<!-- link to css folder -->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<!-- <div class="navbar-brand"></div> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Basket</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Checkout</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<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>
</body>
</html>
I might just need an extra set of eyes. I think I did everything correctly
but the responsive btn doesn't contain anything when I resize the screen
thank you.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="Header">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand">
<h3>Portfolio</h3>
</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">About Me</li>
<li class="nav-item">Skills</li>
<li class="nav-item">Experience</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</div>
</nav>
</div>
Thank you
I do hope you know that <link> and <meta> should be in the <head> of the HTML document structure
You will also need to include the following scripts before the </body> of the document to make your Bootstrap Navbar (and other Bootstrap elements) to work properly.
<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>
Most likely the problem is in .js, but you can also exclude the <div class="container"> and put the <a href="#" class="navbar-brand"> link before the button, the same way it is done in the Bootstrap guide.
I created a two navigation bars using bootstrap.
<!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="style" href="css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>Klevin's</title>
</head>
<body>
<!-- ISLANDWIDE DELIVERY message -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-center" id="topmessage">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">ISLANDWIDE DELIVERY</a>
</li>
</ul>
</nav>
<!-- Actual navigation bar -->
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light" id="mainnavbar">
<!-- Brand -->
<a class="navbar-brand" href="/ecommercewebsite/index.php">Klevin's</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Shop
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Shoes</a>
<a class="dropdown-item" href="#">Handbags</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
<!-- 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>
then I wanted to change the background color of the second navigation bar. So I put following code in main css file
body{
padding-top: 50px;
}
#mainnavbar{
background-color: #CC0000;
}
But it doesn't change the color. I'm doing this according to this tutorial video.
https://www.youtube.com/watch?v=C1phgYAzIfg&t=1066s
In his video it works correctly. But it doesn't work for me. I'm using a newer version of bootstrap. So not sure whether it is the reason.
Remove the bg-light. Since it uses an !important modifier it's overriding your CSS. You'll also want to use navbar-dark or navbar-light to give the Navbar content (links) a light or dark color.
<nav class="navbar navbar-expand-sm navbar-dark" id="mainnavbar"></nav>
#mainnavbar{
background-color: #CC0000;
}
Demo: https://www.codeply.com/go/gFgVhhsoRP
Replace your bg-light with navbar-light
<nav class="navbar navbar-expand-sm navbar-light" id="mainnavbar">
So I have this code below.
Using Bootstrap I would like to have this drop down on the left in the middle of the screen. https://screenshots.firefox.com/WKjwlW5eUiVdS0fO/null How would I do this?
Additional Question: How do I make the 3 lines bigger? Do I just make the navbar-toggler-icon bigger?
<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" type="text/css" href="css/bootstrap.css">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed-top">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav;">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Me</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Using Bootstrap I would like to have this drop down that is currently on the left... in the middle of the screen. https://screenshots.firefox.com/WKjwlW5eUiVdS0fO/null How would I do this?
Additional Question: How do I make the 3 lines bigger? Do I just make the navbar-toggler-icon bigger?
Setting the left and right margin to auto might work. Try this! mx-auto - says margin on the x-axis (ie., left and right) is set to auto!
<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" type="text/css" href="css/bootstrap.css">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed-top">
<div class="container-fluid">
<button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav;">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Me</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Hope this helps!
Bootstrap includes a flexbox grid system for building layouts. It’s based on a 12 column layout and has multiple tiers. It is basically a css class like any other. Bootstrap comes with these classes predefined.
For example:
<div class="col-lg-12">
This would take up all available screen space
</div>
Then all you have to do is center your content and you will end up with a div that takes up the area you want with content that is centered inside it.
The lg in this example stands for a large area, but there are several of these. They can be used in pairs to change the grid based on the available screen area. These col types are predefined and can be easily referenced.
Using this grid system is going to make whatever you create responsive. It is a joy to work with. I recommend you check it out.