Wordwrap on Bootstrap button does not work - html

i have a bootstrap layout on a simple page, just rows with some columns ordered on fullscreen, no with or hight is set and that should remain that way.
here is my layout definition
<div class="container-fluid">
<div class="row">
<div class="section col-lg">
<ul class="list-group>
inside the ul i have a button like this
<a type="button" class="btn btn-success list-group-item list-group-item-warning"
href="https://www.google.at" target="_blank">
<i class="material-icons">extension</i>
<br>
asdfasdfasdfasd fasdfasdfasdfasdfasdf
</a>
but now the problem is that the button text overflows and does not wrap inside the button.
i already tried the solution from Force a line break inside the button's text when using small screens but this also did nothing but cut the button text and not wraping it into the next line
i also tried with overflow : hidden; but this also just hides the text before it overflows

By adding this #media query CSS for smaller screens you can make the button text split on gaps in the button sentence as many times as required to fit inside the button:
CSS
#media only screen and (max-width: 30em) {
body .btn { white-space: normal; }
}
As you can see in this image, this will cover all viewing devices down to a width of 232px, which is well below the standard width for coding the smallest media queries:
Even if you wanted to code below this standard width the CSS snippet still works. Here is the result at an almost ridiculous width of 186px, achieved simply by splitting the text in your question once more. You can make the text even smaller by adding Bootstrap's recommended usage of <small></small> on BS4 .btn text >>> https://getbootstrap.com/docs/4.0/content/typography/#inline-text-elements
I've also added the CSS in a Stack Overflow code snippet below as evidence of it's functional viability, though I should note (as you already know) that it's not my own code. I got it from another Stack Overflow question here >>> Force a line break inside the button's text when using small screens
I hope that it helps to resolve your issues.
#media only screen and (max-width: 30em) {
body .btn { white-space: normal; }
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="section col-lg">
<a type="button" class="btn btn-success list-group-item list-group-item-warning"
href="https://www.google.at" target="_blank">
<i class="material-icons">extension</i>
<br>
asdfasdfasdfasd fasdfasdfasdfasdfasdf
</a>
</div>
</div>
</div>
<!-- javascript -->
<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>

Try to use the p tag:
<a type="button" class="btn btn-success list-group-item list-group-item-warning"
href="https://www.google.at" target="_blank">
<i class="material-icons">extension</i>
<br>
<p>asdfasdfasdfasd fasdfasdfasdfasdfasdf</p>
</a>

Try to use class = "d-inline-block text-truncate" in a tag

Related

Responsive columns with remaining viewport's height under a navbar

I have a non-fixed navbar and two columns. With a desktop layout there is no problem, but when I test the responsiveness from a mobile screen size, I need the column A to fill the remaining viewport's height and the column B to go under the column A. In addition, I need a solution that doesn't involve hardcoding, like subtracting the navbar's height. I've tried using Flexbox, but I haven't made it work. Instead, what I get is that both columns appear in the viewport. I'm using Bootstrap for the responsiveness.
Here there is a figure that shows my problem. Here is the code I've tried so far:
.flex-container {
display: flex;
flex-direction: column;
}
#content {
flex-grow: 1;
}
#row {
flex-grow: 1; max-width: 100vw;
}
#col1 {
background-color: dimgrey;color: white;
}
#col2 {
background-color:darkslategrey;color: white
}
<!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>Web title</title>
</head>
<body>
<div class="vh-100 flex-container">
<nav class="navbar navbar-dark bg-dark">
<div class="container px-0">
<span class="navbar-brand mb-0 h1">Navbar title</span>
</div>
</nav>
<div id="content" class="container flex-container px-0">
<div id="row" class="row mx-0">
<div id="col1" class="col-sm px-0">
Column 1 content
</div>
<div id="col2" class="col-sm px-0">
Column 2 content
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
After reading your question I understood that you want the first child to take full height and then a second child should appear after scrolling through the first child.
As your content is set to flex: 1 which is by default taking entire remaining height, you can use it for your advantage here, now set #row and its children height to 100% as follows
#row, #row > * {
height: 100%
}
This will help you to set the height of #row and its children to at 100%.
So it will give you the desired result while in the mobile layout.
I hope this solves your query.
You'd need to use a media query to only set height 100vh on the smallest screen widths ...
#media (max-width: 576px) {
.min-100 {
min-height: 100vh;
}
}
https://codeply.com/p/1zHDI4rsc8
What you are looking for is a responsive design.
You could use MediaQueri to limit what you see in different sizes.
And for that functionality you want to do if you are using boostrap the best thing you can do would be to use the carousel.
Visit https://getbootstrap.com/docs/4.4/components/carousel/ to see how the carrousel works

How to prevent paragraph from expanding bootstrap's col-auto parent width?

I'm using bootstrap's row with two col-auto. Inside the second, I have a form with <input>'s and a paragraph <p>. This second column should have a minimum possible width, according to the input fields (all the input fields have a min-width assigned via maxlength and size attributes).
My problem is that the paragraph is always increasing the width of the column if the paragraph is long enough. I'd rather have some linebreaks and show the content on more lines. Is there a way to do this without setting a fixed width, adding <br> or using javascript?
LIVE : https://jsfiddle.net/hg37j0yt/
lol can be easy ...
i hope this post will not be treat as advertising :)
i bought pingendo.com so i can give you this as an exercise to improve my skills with pingendo:
<!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 px-0 mx-0">
<div class="container col-sm-12 col-12 col-md-12 col-lg-12">
<div class="row">
<div class="col-4 bg-primary"> COL1 </div>
<div class="col-8 bg-secondary">
<input class="form-control" type="text">
<p > I'm a quite long paragraph and I do not want to expand the width of my column, I'd rather be wrapped. </p>
</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>
anyway... if you download the thing you should click on new project, _blank.html , then you will see a blank screen then push f2 key and in the left side you can see some bootstrap objects you can use to test quick an setup for anything use bootstrap
Can't you just replace <div class="col-auto bg-warning"> with <div class="col bg-warning">?
i.e. don't use col-auto, just use col for the div containing the <p>
Old question but it took me a while to find the answer. Add the following style to the child in the col-auto div to prevent it from expanding the width of the parent:
style="min-width: 100%; width: 0;"
reference: https://stackoverflow.com/a/36092670/1788672

Bootstrap 4 IE not taking col-sm-12 on card-img-overlay

I created a cta with image and text overlay using the bootstrap card-img-overlay class. Also added a div with dark low opacity to make the text brighter. Everything work good on all browsers except IE 11.
Q1:
where is the column width breaking in IE, i don't think its my css that's
causing this part. is it a known bootstrap 4 issue?
Q2:
how to fix the overlay div to show on top of the image like chrome and other browsers. Is there a better approch that works for both?
broke IE IMAGE
Chome and other browsers that are working good
.dnow-regionsContent .overlay-div {
height: 100%;
width: 100%;
position: absolute;
background-color: #000;
opacity: 0.3;
}
.dnow-regionsContent img {
max-height: 40rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick slider</title>
<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="css/style.css">
</head>
<body>
<section class="dnow-regionsWrap">
<div class="dnow-regionsContent">
<div class="card bg-dark text-white">
<img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt="">
<div class="overlay-div"></div>
<div class="card-img-overlay d-flex align-items-center container">
<div class="row mb-5">
<div class=" col-sm-12 text-content">
<h2 class="card-title ">
Canada
</h2>
<p class="">
Viewl all Location Viewl all Location
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<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>
The actual reason:
It's not col-sm-12, but the d-flex on card-img-overlay which makes your design look not proper in IE.
Why?
When display:flex is applied to an element, the immediate child (i.e. the flex items) would need some width to be specified or else they would not expand or take up enough space as we require unless content is not sufficient enough.
In your case we have d-flex along card-img-overlay so the immediate child (i.e. flex item) of it .row, would not be having 100% width. Now for col-sm-12 column, 100% would be full horizontal space that is with its parent (.row) which is not itself wide enough. That's the real issue here.
Solution:
Give 100% width to .row, you may use class of Bootstrap 4 w-100.
This could have been the real solution to your issue/query but few things are still needed to get the look you want, as you have it in other browsers.
Giving position: absolute does not work alone, the smart browsers would know what to do, but the other ones would need offset values like top & left. In your case with value as 0.
Finally image with actual dimensions to attributes width and height of <img> tag, here in your case it would be width="1200" & height="800".
So basically bootstrap has nothing to do with this issue, it's just the flow of markup and CSS properties.
Side Note:
I hope the above steps helped you to clear issue or understand it. I would suggest to always have width and height attributes for an <img> tag so that the browsers(old ones) would know to make that specific size of the block on a page.
.dnow-regionsContent .overlay-div {
height: 100%;
width: 100%;
position: absolute;
background-color: #000;
opacity: 0.3;
/*Added*/
top:0;
left:0;
}
.dnow-regionsContent img {
max-height: 40rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick slider</title>
<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="css/style.css">
</head>
<body>
<section class="dnow-regionsWrap">
<div class="dnow-regionsContent">
<div class="card bg-dark text-white">
<img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" width="1200" height="800" alt="">
<div class="overlay-div"></div>
<div class="card-img-overlay d-flex align-items-center container">
<div class="row mb-5 w-100">
<div class=" col-sm-12 text-content">
<h2 class="card-title ">
Canada
</h2>
<p class="">
Viewl all Location Viewl all Location
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<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>
It was not you, it was IE.
Hope this helps you!
I've not got anyway of testing IE.
But i've used your example and taken it to the grass roots of Bootstrap 4.
I have modified your css and html to use :before to overlay the image with your black opaque style. I apply this on .card-img-overlay and any child elements will naturally appear above the :before pseudo style.
HTML
<div class="card bg-dark text-white">
<img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" class="card-img" alt="...">
<div class="card-img-overlay">
<div class="container h-100">
<div class="row h-100">
<div class="col align-self-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>
</div>
</div>
SASS/CSS
.card-img-overlay {
overflow: hidden;
&:before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: #000;
opacity: 0.3;
}
}
Try this fiddle in IE... https://jsfiddle.net/joshmoto/xm4ude0L/
If this still doesn't work in IE still then you are going to have to be old school and find a work around. If it was me, I would output a browser body class, and control the problem for the IE users using css. You have not mentioned how you generate your html so I cant advise on a browser body class function.
Or just use browser happy to promote better ways of web browsing to force visiting users to up their game and get with the times :)
You have a lot of unnecessary stuff going on here.
Here is a snippet that works in IE.
Also for whatever reason your img link did not work in IE, so I replaced it with another image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick slider</title>
<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="css/style.css">
</head>
<body>
<section class="dnow-regionsWrap">
<div class="dnow-regionsContent">
<div class="card bg-dark text-white">
<img src="https://cdn2.outdoorphotographer.com/2018/04/DShow_Echoconfl-824x548.jpg" alt="">
<div class="card-img-overlay align-items-center d-flex">
<div class="card-body ">
<h2 class="card-title">
Canada
</h2>
<p class="card-text">
Viewl all Location Viewl all Location
</p>
</div>
</div>
</div>
</div>
</section>
<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>
Bootstrap 4 uses the flex property for the column. This property as far as I know is not entirely compatible with IE. Also IE was discontinued by Microsoft, I would not worry about giving support.

Smart phone portrait displays unwanted space underneath squeezed website elements

I've been trying to get the elements of my website to look equally okay on both PC monitors and smart phone displays.
I've tried adding the the meta viewport line within the head section but this doesn't seem to have changed anything:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
On my desktop display the site looks like this.
When I scroll down there is no additional space (which is what I want).
When I view the website on my smart phone, it looks like this:
As you can see the elemts are squeezed into the very top corner and there is a lot of free space below them. I realize there is a difference between portrait and landscape views, but the amount of space seems pretty exaggerated to me.
When I turn the smart phone horizontal it does look okay. However, I would like users to view the site vertically on their smart phones, and for the elements to take up more of the screen.
Here is my html:
<html>
<head>
<link rel="stylesheet" href="css/bootstrap-4.0.0-dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/pagestyle.css">
<style type="text/css">
.tuner {position: relative; left:50%; transform:translateX(-50%); margin-top:5%; }
.alttunings {position: absolute; left: 5%; top: 50px; width: 180px;}
.btn-default:hover{background-color:#CCCCCC;border-color:#CCCCCC}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
</head>
<body>
<div class="tuner">
<object type="image/svg+xml" data="media/standard-tuning.svg">
</object>
<div class="alttunings">
<p> <button type="button" class="btn btn-block selectedtuning" width=230px>Standard Tuning</button>
</p>
<p> <button type="button" class="btn btn-block unselectedtuning" width=230px>Open D Tuning</button>
</p>
<p> <button type="button" class="btn btn-block unselectedtuning" width=230px>Drop D Tuning</button>
</p>
<p> <button type="button" class="btn btn-block unselectedtuning" width=230px>Open G Tuning</button>
</p>
</div>
</div>
<script type="text/javascript" src="js/script1.js" defer></script>
<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>
Here is my main page css:
body {
background-color: #C1C1C1;
width: auto;
}
Is there anything else I can try other than using the viewport line that I've already tried?

About Bootstrap 4 - Navbar top placement

I am using Bootstrap 4.
I have a question about the Navbar "Fixed top" class. http://v4-alpha.getbootstrap.com/components/navbar/#placement
The Navbar "Fixed top" class covers content.
like this demo below, the Navbar covers <div class="jumbotron">,I want the Navbar to not cover it, what should I do?
I have no idea how to prevent the Navbar from covering content, because the device's size is visible.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/tether/1.3.2/css/tether.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
</nav>
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="m-y-2">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.3.2/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</body>
</html>
Try using sticky-top instead of fixed-top this worked for me on Bootstrap 4 Alpha6.
In my opinion the best way would be to set an enclosing tag to the rest of the content that it is covering and set the margin-top attribute in css in vw or vh or percentages (Depending on your use case) to make sure no content is hidden by the fixed bar on the top. This will make sure it is even resizable without significant changes in the navbar's effect on the page although i would suggest changing the margin on the basis of page size using the #media controller in css.
For more information on your problem you can check this thread:
twitter bootstrap navbar fixed top overlapping site
You can fix this with css
<style>
body {
margin-top: 50px;
}
</style>
Use:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
as shown here on w3schools.com
The 4.0.0 version of bootstrap css doesn't work properly. I had the same problem and replacing with 3.3.7 version fixed it.
You can Use class .sticky-top or overcome this using custom CSS
body{
padding-top: 70px;
z-index: 0;
}