So for a school project im making a website but whenever I use container and container-fluid no matter what I use i have these empty spaces on the side and I have no clue how to fix them so i came here for help.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" id="nav">
<div class="row">
<div class="col-xl-12">
<div class="container-fluid" id="nav1">
<header class="nav-inverse">
<ul class="nav justify-content-center">
<div class="row">
<div class="col-xs-2">
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Domov</a>
</li>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Življenjepis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Obdobje</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Nagrade</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Vizitka</a>
</li>
</ul>
</header>
</div>
</div>
</div>
</div>
<div class="container" id="body">
<div class="row">
<div class="col-xl-2">
<div class="container fluid" id="body1">
<h1 id="Header1">Hello</h1>
</div>
</div>
</div>
</div>
</body>
</html>
I do hope I can find help here and thanks in advance!
Bootstrap adds in some spacing by default to container and container-fluid classes. To remove these, you can specify you want no padding / margin on each item by adding a class using the format {property}{sides}-{size} where size is 0.
For example, to remove padding you can add a p-0 class. You can also remove a specific side:
pt-0 top
pr-0 right
pb-0 bottom
pb-0 left
Similarly, to remove margin you can add a m-0 class.
For more info on spacing, check out: https://getbootstrap.com/docs/4.0/utilities/spacing/
To remove these default spacing use bootstrap grid classes can be removed with .no-gutters.
Here is an example
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
For more information: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters
Not sure what you mean by white spaces, you might want to define with an image. If you mean that your body doesn't fill the page, the problem is nested containers. See comments below.
<body>
<!-- This container is going to "add space" to your sides. -->
<div class="container" id="nav">
<div class="row">
<!-- This will fill all 12 columns on XL viewport,
but the columns are inside the parent container. -->
<div class="col-xl-12">
<!-- This will go to the limits of the parent container above. -->
<div class="container-fluid" id="nav1">
<header class="nav-inverse">
<ul class="nav justify-content-center">
<div class="row">
<div class="col-xs-2">
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Domov</a>
</li>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Življenjepis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Obdobje</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Nagrade</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Vizitka</a>
</li>
</ul>
</header>
</div>
</div>
</div>
</div>
<div class="container" id="body">
<div class="row">
<div class="col-xl-2">
<div class="container fluid" id="body1">
<h1 id="Header1">Hello</h1>
</div>
</div>
</div>
</div>
</body>
Related
I'm new to website developement. I'm trying to get my embbeded twitch player to use it's parent full width. The height seems so work just fine, but whilst using the d-flex class from bootstrap it makes the player extremly thin.
Please watch my code here:
https://jsfiddle.net/Sagan_owl/nwvt2ag8/3/
Don't mind the player error message, that's expected
<!DOCTYPE html>
<html lang="en">
<head>
<title>Brams 225</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="./main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<script src="https://embed.twitch.tv/embed/v1.js"></script>
</head>
<body>
<main class="container-fluid">
<div class="row corps">
<div class="col-lg-2 bg-warning">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Donations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Professionnel</a>
</li>
</ul>
</div>
<div class="col-lg-10 d-flex flex-column">
<div class="row d-flex align-items-stretch section2-haut bg-success">
<div class="col-lg-12 d-flex align-self-center justify-content-center">
<div id="twitch-embed"></div>
<script type="text/javascript">
new Twitch.Embed("twitch-embed", {
width: "100%",
height: "100%",
channel: "monstercat",
// only needed if your site is also embedded on embed.example.com and othersite.example.com
parent: ["embed.example.com", "othersite.example.com"]
});
</script>
</div>
</div>
<div class="row section2-bas bg-info ">
<div class="col-lg-4 mt-auto text-center">
<img src="https://panels-images.twitch.tv/panel-18340583-image-9eaaa5a0-b00a-4475-bc6a-c6b5930bae48"
class="img-fluid" alt="twitter img not found">
</div>
<div class="col-lg-4 mt-auto text-center">
<img src="https://panels-images.twitch.tv/panel-18340583-image-1deed596-2b7e-4781-9628-e3a82b4cc9c2"
class="img-fluid" alt="twitter img not found">
</div>
<div class="col-lg-4 mt-auto text-center">
<img src="https://panels-images.twitch.tv/panel-18340583-image-f0ce67ba-5a55-4aa6-8d94-b628ebac530a"
class="img-fluid" alt="twitter img not found">
</div>
</div>
</div>
</div>
</main>
</body>
</html>
----------
main{
height: 100vh;
}
.corps{
height: 100vh;
}
.section2-haut{
height: 80vh;
}
.section2-bas{
height: 20vh;
}
You need to set the dimensions on the parent div
https://jsfiddle.net/pu5rhtxo/
#twitch-embed {
width: 100%;
}
In this example I set some CSS on the parent Div
Also fixed the parent in the JS script tags so the player actually worked
Not a native English speaker so prepare for typos.
I was wondering why my nav and sidebar are being shown twice on my html page when i look at it in a browser.
So you'd know what I'm talking 'bout here's a screenshot:
Right now my main page looks like this:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Schadedossier #yield('title')</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://soshandyman.blob.core.windows.net/themes/bs4-insurance.css">
</head>
<body>
<!--wrapper(the thing around the sidebar and the nav)-->
<div class="d-flex" id="wrapper">
<!--sidebar-->
<div class="bg-light border-right collapse" id="sidebar-wrapper">
<div class="sidebar-heading">logo</div>
<div class="list-group list-group-flush">
Tussenpersoon
Woning
Schadedossier
Data schadedossier
Verzekeringsnemer
<button class="btn btn-outline-secondary">Contract raadplegen</button>
</div>
</div>
<div class="container-fluid p-0">
<!--page content-->
<div id="page-content-wrapper">
<nav class="navbar navbar-light bg-light border-bottom">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidebar-wrapper" aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar" id="navbarSupportedContent">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a class="nav-link active" id="aangifte-tab" data-toggle="tab" href="#aangifte" aria-controls="aangifte">Aangifte</a>
</li>
<li class="nav-item">
<a class="nav-link" id="details-tab" data-toggle="tab" href="#details">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="overzicht-tab" data-toggle="tab" href="#overzicht">Overzicht</a>
</li>
<li class="nav-item">
<a class="nav-link" id="evaluatie-tab" data-toggle="tab" href="#evaluatie">Evaluatie</a>
</li>
</ul>
</div>
</nav>
<!--start tab content (here starts the nav aangifte and so on)-->
<div id="myTabContent" class="tab-content">
#yield('content', View::make('childAangifte'))
</div>
<!--end page content-->
</div>
<!--endsidebar-->
</div>
<!--endwrapper-->
<!--incert bootstrapscripts here-->
</body>
Then this is my child's code:
#extends('welcome')
#section('title')
aangifte
#endsection
<!--incert html-->
#endsection
Anyway I'm having trouble with this because this is not the only child i need to display but if this will form an issue every time then I rather want to know before I try to get the other ones to work.
Also what option would be better to use switch or if to go to the other children?
Thanks a bunch and sorry for the terrible formatting.
So I am trying to design a site. First time using bootstrap and I just cant figure out editing the heights properly and I feel like I just started learning coding from scratch. (I had taken a few years hiatus.)
I am trying to get the page to look like this on above tablet(portrait size)
Above portrait size:
My goal for the larger size was to have the main body take up about 80% of the window and the footer/header take up the rest of the space.
And trying to get it to look like this on the tablet(portrait) and smaller:
Below portrait size:
My goal for this one was not to just have it go down below the image and make it scroll-able.
Right now my code looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<title>The Last Names</title>
<link rel="stylesheet" href="css/bootstrap4.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Caitlyn & Jacob Team Up</a>
<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">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">The Bridal Party</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">RSVP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Registry</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!-- Pictures will go here -->
<div class="picmain col-12 col-md-6 bg-primary">
<h3>pics here</h3>
</div>
<!-- Info column row -->
<div class="col-12 col-md-6">
<div class="row">
<!-- info 1 -->
<div class="info1 col-12 bg-secondary">
<h3>info1</h3>
</div>
<!-- info 2 -->
<div class="info2 col-12 bg-info">
<h3>info2</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="footer col-12">Footer stuff will go here</div>
</div>
</div>
</body>
</html>
can anyone help me figure out what I need to do to achieve what I was hoping for?
Thank you :)
What you can do on the body is to create a row with two columns and in the second column you nest 2 rows(each row having a class "col"). Check this pen example
`
<!--General Row starts here -->
<div class="row">
<!--first column starts here -->
<div class="col-md one ">
<h1>Column </h1>
</div>
<!--first column ends here -->
<!--second column starts here -->
<div class="col-md">
<!--first nested row starts here -->
<div class="row">
<div class="col two">
<h1> first Nested row with "col" class</h1>
</div>
</div>
<!--first nested row ends here -->
<!--second nested row starts here -->
<div class="row">
<div class="col three">
<h1> second Nested row with "col" class </h1>
</div>
</div>
<!--second nested row ends here -->
</div>
</div>
</div>
` https://codepen.io/stevegates/pen/MPmRBp
and also check out the bootstrap docs for more information on bootstrap grid
https://getbootstrap.com/docs/4.1/layout/grid/
I am trying to figure out why my container is overlapping my header when it comes to the small screen section. My goal is for the container (and all the contents inside of it) to be underneath my header on the page. It works perfectly for the extra small screen part, but the small screen is where it all goes wrong. I am just beginning my journey into bootstrap so please ignore my sloppy code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="css/grid-system-test.css">
</head>
<body>
<header>
<div class="d-sm-none"> <!-- Navbar is only viewable on extra small screens -->
<div class="white-block">
<img class="comp-logo mx-auto d-block" src="img/logo.png" alt="company logo">
</div>
<nav class="text-center">
<div class="col-12">
<h2 class="thin-font">codeup design</h2>
</div>
<div class="col-12">
<ul class="nav xs-nav">
<li class="nav-item">
<a class="nav-link" href="#"><p>SERVICES</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><p>WORK</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><p>BLOG</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><p>CONTACT</p></a>
</li>
</ul>
</div>
</nav>
</div>
<div class="d-none d-sm-block"> <!------------------------ NAVBAR FOR SMALL SCREEN STARTS HERE -------------------------->
<nav class="white-bg text-center small-nav">
<ul class="nav justify-content-center">
<li class="small-nav-item">
<a class="small-nav-link" href="#">SERVICE</a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#">WORK</a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#"><img class="comp-logo comp-logo-small" src="img/logo.png"></a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#">BLOG</a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#">CONTACT</a>
</li>
</ul>
<div class="col-12">
<h2 class="thin-font">codeup design</h2>
</div>
</nav>
</div>
</header>
<!-------------------------------------------- CONTAINER STARTS HERE -------------------------------------------------->
<div class="container-fluid text-center">
<h2>VISUAL DESIGN & WEB DEVELOPMENT</h2>
<h4 class="park-city-text">FROM PARK CITY, UTAH</h4>
<div class="row">
<div class="col-6">
<div class="circle-big red-bg ml-4">
<h6 class="text-light center-txt">DESIGN</h6>
</div>
</div>
<div class="col-6">
<div class="circle-big orange-bg mr-4">
<h6 class="text-light center-txt">DEVELOP</h6>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="circle-big green-bg ml-4 circle-margin-top">
<h6 class="text-light center-txt">SUPPORT</h6>
</div>
</div>
<div class="col-6">
<div class="circle-big blue-bg mr-3 circle-margin-top">
<h6 class="text-light center-txt">HOST</h6>
</div>
</div>
</div>
<!-- end of circle images -->
<p class="selectW">SELECTED WORK</p>
<img class="ipad rounded" src="img/apple-ipad.jpg" alt="apple on ipad">
<div class="row">
<div class="col-6">
<p class="float-left ml-3">FEATURED PROJECT</p>
</div>
<div class="col-6">
<div class="circle-sm red-bg small-circle-text float-right mr-2"><p class="font-weight-bold">D</p></div>
<div class="circle-sm orange-bg small-circle-text float-right mr-2"><p class="font-weight-bold">D</p></div>
<div class="circle-sm green-bg small-circle-text float-right mr-2"><p class="font-weight-bold">S</p></div>
<div class="circle-sm blue-bg small-circle-text float-right mr-2"><p class="font-weight-bold">H</p></div>
</div>
</div>
</div>
</body>
</html>
I want to create admin panel with bootstrap. First I want to make navigation menu in the left side. I get the problem my navigation in the red background did not full width in the left columns like this code :
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-2" style="background-color:#f0f;">
<div class="nav flex-column" style="background-color:#f00;">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</div>
</div>
</div>
<div class="row">
<div class="col-10">
Content
</div>
</div>
</div>
just put the bootstrap p-0 class
<div class="col-2 p-0">
Are you trying to get red area cover the the pink area?
For that you have to override the style of your css framework for `col-2'
.override-class
{
padding-right: 0px!important;
padding-left: 0px!important;
}
If you don't need to change it for all class named col-2, try this inline CSS
<div class="col-2" style="background-color:#f0f; padding-left:0px; padding-right:0px;">
Else you can try this one
.col-2{
padding-right: 0px !important;
padding-left: 0px !important;
}
.col-2{
padding-right: 0px !important;
padding-left: 0px !important;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-2" style="background-color:#f0f;">
<div class="nav flex-column" style="background-color:#f00;">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</div>
</div>
<div class="col-10">
Content
</div>
</div>
</div>
Bootstrap 4.0.0-beta has some utility class for margin, padding, gutter, vertical align and more... please checkout this code snippet...
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-2 p-0" style="background-color:#f0f;">
<div class="nav flex-column" style="background-color:#f00;">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</div>
</div>
<div class="col-10">
Content
</div>
</div>
</div>