I want to be able to have a carousel with the div's inside centered with a stroller.
Here are the images:
This is what I currently have:
I would love to center those two boxes within the arrows:
I want the arrows to slide between the three boxes: Right arrow: From 2 -> 3 -> 1 etc.
Here is the code:
$('#carousel-example-generic').carousel({
wrap: true,
interval: false
});
.carousel.slide img {
width: 100%;
height: auto;
}
.carousel img {
border-radius: 0px;
}
.carousel-control.left,
.carousel-control.right {
background: none;
color: #red;
border: none;
}
.carousel-control.left {
margin-left: -45px;
color: black;
}
.carousel-control.right {
margin-right: -45px;
color: black;
}
/* DIV BOXES */
.bottomFarLeftBox {
height: 170px;
width: 290px;
background-color: #4B92DB;
float: left;
clear: none;
}
.bottomMidLeftBox {
height: 170px;
width: 290px;
margin-right: 60px;
background-color: #4B92DB;
float: right;
clear: none;
}
.bottomRightBox {
height: 170px;
width: 310px;
}
.row img {
padding-bottom: 5px;
}
#topLeftColumn {
padding-right: 30px;
}
#bottomLeftColumn {
padding-left: 0px;
}
#bottomRightColumn {
padding-right: 0px;
}
#bottomContactsRow {
display: inline-flex;
}
<div class="col-sm-8">
<h4>Latest Training Documentation</h4>
<hr style="margin-top: 10px;" />
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" class="active"></li>
<!-- data-slide-to="0" -->
<!-- UPDATE ON 3+ SLIDES -->
<!-- <li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li> -->
</ol>
<div class="carousel-inner">
<!-- Slide -->
<div class="item active">
<div class="row">
<div class="col-md-6">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 60px!important; padding-bottom: 5px; padding-right: 6px; vertical-align: middle;" />OneDrive</h2>
<p id="innerBoxText">Store files in one place, share them with others, and get to them from any device connected to the internet.</p>
</div>
</a>
</div>
<div class="col-md-6">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/delveLogo.png" style="height: 50px!important; width: 50px!important; padding-bottom: 5px; padding-right: 8px; vertical-align: middle;" />Delve</h2>
<p id="innerBoxText">It's more than your employee profile! Get personal insights and relevant information based on who you work with and the content you work on.</p>
</div>
</a>
</div>
</div>
</div>
<!-- Slide -->
<div class="item">
<div class="row">
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
</div>
</div>
<!-- Slide -->
<div class="item">
<div class="row">
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
Now you have it
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel.slide img {
width:100%;
height:auto;
}
.carousel img {
border-radius: 0px;
}
.carousel-control.left, .carousel-control.right {
background: none;
color: #red;
border: none;
}
.carousel-control.left {color: black;}
.carousel-control.right {color: black;}
/* DIV BOXES */
.bottomFarLeftBox {
height: 170px;
width: 95%;
margin-left: 5%;
background-color: #4B92DB;
float: left;
clear: none;
}
.bottomMidLeftBox {
height: 170px;
width: 95%;
margin-right: 5%;
background-color: #4B92DB;
float: right;
clear: none;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img{
width: 70%;
height: 200px;
margin: auto;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>Store files in one place, share them with others, and get to them from any device connected to the internet.</p>
</div>
</div>
</a>
</div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>It's more than your employee profile! Get personal insights and relevant information based on who you work with and the content you work on.</p>
</div>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am second</p>
</div>
</div>
</a>
</div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am second of second</p>
</div>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am the third</p>
</div>
</div>
</a>
</div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am the third of third</p>
</div>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
Related
I am trying to create a website where you can buy some sneakers, when the cart is clicked I want a div showing "your cart is empty" or the number of the items in the cart. my problem is it shows behind the carousel instead of over the carousel. I'm attaching the pictures of how it suppose ti look and how my one looks:
This is my HTL code:
<header>
<div id="header">
<div id="navLogo">
<div id="nav">
<div id="navMenu">
<button type="button" class="btn" data-mdb-toggle="modal" data-mdb-target="#exampleModal">
<image id="navIcon" src="./images/icon-menu.svg"></image></button>
</button>
<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="nav-menu">
<div class="modal-body">
<button type="button" class="btn" data-mdb-dismiss="modal"><image id="closeImg" src="./images/icon-close.svg"></image></button>
<ul class="nav-list">
<li class="nav-item">
<a class="nav-link" href="#">Collections</a>
<li class="nav-item">
<a class="nav-link" href="#">Men</a>
<li class="nav-item">
<a class="nav-link" href="#">Women</a>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--End Modal-->
</div>
<div id="logo">
<img id="logoImg" src="./images/logo.svg"/>
</div>
</div>
<div id="cartAvatar">
<button id="cartIcon">
<img id="cart" src="./images/icon-cart.svg"/>
<span id="cartIconNumber">0</span>
</button>
<!--CART EMPTY-->
<div class= "cart-Empty">
<div class="cart-Title" >
<h4>Cart</h4>
</div>
<div class="cart-Cont">
<h4> Your cart is empty</h4>
</div>
</div>
<!--CART FULL-->
<div class="cartFull">
<div class="cartContent">
<div class="cart-Title">
<h4>Cart</h4>
</div>
<div class="cart-img">
<img id="imgCart" class='cart-item' src="./images/image-product-1-thumbnail.jpg" class="shopping-cart-image">
</div>
<div class="cart-item">
<div class = "cart-name">
<h6>Autumn Limited Edition...</h6>
</div>
<div class="numbers">
<div class="cart-prize">
<p id="sneakers.prize"> </p>
</div>
<div class="cart-amount">
<p id="quantityFromStorage"></p>
</div>
<div class="cart-total">
<p id="prizeFromStorage"><p>
</div>
<div class="cart-delete">
<button class= "delete" type="button"><img src="./images/icon-delete.svg" class="shopping-cart-image"></button>
</div>
<span id="checkout">Checkout</span>
</div>
</div>
</div>
<!--END FOR CART-->
</header>
<body>
<div id="mainContainer">
<div id="myCarousel">
<div id="fullCarousel">
<!--Carousel wrapper -->
<div id="carouselSneakers" class="carousel slide carousel-slide" data-mdb-ride="carousel">
<!-- Slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/image-product-1.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="./images/image-product-2.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="./images/image-product-3.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="./images/image-product-4.jpg" class="d-block w-100" alt="..." />
</div>
</div>
<!-- Controls -->
<div id="controls">
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselSneakers"
data-mdb-slide="prev" > <img class="controls" src="./images/icon-previous.svg">
</button>
<button class="carousel-control-next" type="button" data-mdb-target="#carouselSneakers"
data-mdb-slide="next"> <img class="controls" src="./images/icon-next.svg">
</button>
</div>
<!--Thumbnails-->
<div class="carousel-indicators">
<button id="imgdes"type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1">
<img src="./images/image-product-1-thumbnail.jpg" class="img-fluid" />
</button>
<button id="imgdes" type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="1" aria-label="Slide 2">
<img src="./images/image-product-2-thumbnail.jpg" class="img-fluid" />
</button>
<button id="imgdes" type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="2" aria-label="Slide 3">
<img src="./images/image-product-3-thumbnail.jpg" class="img-fluid" />
</button>
<button id="imgdes" type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="3" aria-label="Slide 4">
<img src="./images/image-product-4-thumbnail.jpg" class="img-fluid" />
</button>
</div>
</div>
</div>
</div>
<!--Modal carousel-->
<div id="myModal" class="modal-carousel">
<div id=closeModal><img id=closeCarousel src="./images/icon-close.svg"/></div>
</div>
This is my css
/* CART EMPTY */
.cart-Empty{
display:none;
border-radius:30px;
width: 50%;
height:60vh;
width: fit-content;
margin-top: 80px;
z-index: 999;
}
.cart-Title{
border-bottom: solid hsl(0, 0%, 75%);
margin-left:10px;
margin-right: 10px;
width: 200px;
}
.cart-Cont{
color:hsl(0, 0%, 75%);
text-align: center;
padding-top: 25%;
padding-bottom: 25%;
width :200px;
}
/* CART FULL*/
.cartFull{
display: none;
position:absolute;
z-index: 9999;
}
.cartContent{
display: flex;
flex-direction: row;
position:absolute;
margin-top: 20px;
}
#imgCart{
height: 80px;
margin-left: 20px;
border-radius: 10%;
}
.numbers{
display:flex;
flex-direction: row;
}
.cart-item{
display: flex;
flex-direction: column;
margin-left: 20px;
color:hwb(0 75% 25%);
align-items:baseline;
align-content: center;
justify-items: flex-start;
}
.cart-total{
color:black;
width: fit-content;
}
.delete{
margin-left: 40px;
border: none;
background-color: white;
}
#checkout{
margin:20px;
background-color:hsl(26, 100%, 55%);
border-radius: 15px;
border: none;
height: 70px;
color:white;
width:100%;
}
/* CAROUSEL */
.carouselSneakers{
height: 80vh;
border: solid 1px;
width: 30px;
background-color: white;
border-radius: 50px;
padding:8px;
}
.carousel-inner{
position: inherit;
}
.carousel-indicators{
display:none;
}
.controls{
background-color: white;
border-radius: 50px;
padding:8px;
}
And this is my JS code, I know is pure javascript
IS very basic but I'm just starting and learning by myself
cartIcon.addEventListener("click", cartIconClicked)
function cartIconClicked(event){
const buttonClicked = event.target;
cartIconNumber.innerText == 0 ?
cartEmpty.classList.toggle("cart-Empty"): cartFull.classList.toggle("cartFull");
quantityFromStorage = localStorage.getItem('quantity');
prizeFromStorage = localStorage.getItem('prize');
totalPrize.innerText = prizeFromStorage;
squantity.innerText= "X" + quantityFromStorage;
sprize.innerText ="$" + sneakers.prize + ".00";
cartFull
.querySelector('.delete')
.addEventListener('click', removeShoppingItem);
function removeShoppingItem(event){
const buttonDelete = event.target;
cartIconNumber.innerText > 0 ?
cartFull.classList.toggle("cartFull") : null;
cartIconNumber.innerHTML = 0;
cartIconNumber.style.display="none";
}
}
Can someone tell me how can I put the cart on top of the carousel?? thank you!!!
Add z-index:1; in your carouselSneakers CSS class and change z-index from 999 to 3 in your cart-Empty and cartFull class. Hopefully it will work but also try to ask for more help in comments if it's not working.
I've recently started using bootstrap to make a website functioning for both computer and mobile phones/tablets.
While it scales everything nicely in the browser, when I resize my browser window, some words disappear in my interface.
How can I make it so that my text doesn't disappear and stay in their respective rectangles?
I'm running this webpage on a Siemens S7-1200 PLC. I have made a json file that fetches data from the PLC which I represent on my website. When I try it on my phone however, some of the text disappears.
The following Image represents how my page looks like on a web browser on my laptop:
When I resize my browser it looks like the following:
Notice the arrow I've added, the arrow points towards the '1' that is next to the text that says 'Mixer 1'.
Excuse my english, it's not my mother tongue.
My HTML code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- title -->
<title>Main Page</title>
<!-- scripts -->
<!-- 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">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">
<img src="img/logo.png">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="main.html"><h2>Main</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="motoren.html"><h2>Motoren</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="verwarming.html"><h2>Verwarming</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io1.html"><h2>DI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io2.html"><h2>DQ</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io3.html"><h2>AI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="alarm.html"><h2>Alarm</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="diagnostics.html"><h2>Diagnostics</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="parameters.html"><h2>Parameters</h2></a>
</li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay">
<div class="customTable">
<div class="container-fluid">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-pixel-width-100">Overzicht</div>
<div class="col" id="ovznormaal">Normaal</div>
<div class="col" id="ovzengsave">Energy Save</div>
<div class="col" id="ovzhyg">Hygieniseren</div>
<div class="col" id="ovzhygdone">Hygieniseren Klaar</div>
<div class="col" id="ovzdrleeg">Leeg Draaien</div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Motoren</div>
<div class="col" id="mix1">Mixer 1</div>
<div class="col" id="mix2">Mixer 2 (EC100)</div>
<div class="col" id="ventil">Ventilator</div>
<div class="col" id="percent"><p id="percnum">0 %</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Verwarming</div>
<div class="col">Product Temperatuur</div>
<div class="col"><p id="prodTemp">000.0 C</p></div>
<div class="col">Mat 1 Temperatuur</div>
<div class="col"><p id="m1temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">IO</div>
<div class="col">Mat 2 Temperatuur</div>
<div class="col"><p id="m2temp">000.0 C</p></div>
<div class="col">Mat 3 Temperatuur</div>
<div class="col"><p id="m3temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Alarmen</div>
<div class="col">Verwarming Matten</div>
<div id="mt1" class="col">Mat 1</div>
<div id="mt2" class="col">Mat 2</div>
<div id="mt3"class="col">mat 3</div>
<!--<div class="col"></div>-->
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Diagnostics</div>
<div class="col">Programma Keuze</div>
<div id="kort" class="col"><p id="shortprog">Kort 0000 Min</p></div>
<div id="lang" class="col"><p id="longprog">Lang 0000 Min</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Parameters</div>
<div class="col">Operationele stand</div>
<div class="col">
<div class="switchcontainer">
<form>
<input type="submit" value="Auto">
<input type="hidden" name='"2_HMI".AUTOTEST' value="0">
</form>
<form>
<input type="submit" value="Handmatig">
<input type="hidden" name='"2_HMI".AUTOTEST' value="1">
</form>
<!--<button id="Auto">Auto</button>
<button id="Handmatig">Handmatig</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" 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>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/js/bootstrap4-toggle.min.js"></script>
<script type="text/javascript" src="js/custom/main.js"></script>
</body>
</html>
My CSS:
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
.header {
background-image: url('../img/test.png');
background-size: cover;
background-position: center;
position: relative;
}
.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.customTable {
padding-top: 8%;
padding-left: 2%;
width: 98%;
}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
}
#Auto {
width: 180px;
height: 100%;
}
#Handmatig {
width: 180px;
height: 100%;
}
I hope someone can give my some tips, I'm kind of a beginner to CSS/HTML/JS.
Your <DIV> text is wrapping into the box below it, add white-space: nowrap to your CSS for the DIVs under .col {} and .col-pixel-width-100 {}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
white-space: nowrap;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
white-space: nowrap;
}
You could also try adding the "text-nowrap" class. That is a bootsrtap class that will essentially do the same as what Bob Dole has suggested above
you can simply provide a new class to all the required columns. Here i have edited the code for you
HTML PART
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- title -->
<title>Main Page</title>
<!-- scripts -->
<!-- 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">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">
<img src="img/logo.png">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="main.html"><h2>Main</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="motoren.html"><h2>Motoren</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="verwarming.html"><h2>Verwarming</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io1.html"><h2>DI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io2.html"><h2>DQ</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io3.html"><h2>AI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="alarm.html"><h2>Alarm</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="diagnostics.html"><h2>Diagnostics</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="parameters.html"><h2>Parameters</h2></a>
</li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay">
<div class="customTable">
<div class="container-fluid">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-pixel-width-100">Overzicht</div>
<div class="col newclass" id="ovznormaal">Normaal</div>
<div class="col newclass" id="ovzengsave">Energy Save</div>
<div class="col newclass" id="ovzhyg">Hygieniseren</div>
<div class="col newclass" id="ovzhygdone">Hygieniseren Klaar</div>
<div class="col newclass" id="ovzdrleeg">Leeg Draaien</div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Motoren</div>
<div class="col newclass" id="mix1">Mixer 1</div>
<div class="col newclass" id="mix2">Mixer 2 (EC100)</div>
<div class="col newclass" id="ventil">Ventilator</div>
<div class="col newclass" id="percent"><p id="percnum">0 %</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Verwarming</div>
<div class="col newclass">Product Temperatuur</div>
<div class="col newclass"><p id="prodTemp">000.0 C</p></div>
<div class="col newclass">Mat 1 Temperatuur</div>
<div class="col newclass"><p id="m1temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">IO</div>
<div class="col newclass">Mat 2 Temperatuur</div>
<div class="col newclass"><p id="m2temp">000.0 C</p></div>
<div class="col newclass">Mat 3 Temperatuur</div>
<div class="col"><p id="m3temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Alarmen</div>
<div class="col newclass">Verwarming Matten</div>
<div id="mt1" class="col newclass">Mat 1</div>
<div id="mt2" class="col newclass">Mat 2</div>
<div id="mt3"class="col newclass">mat 3</div>
<!--<div class="col"></div>-->
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Diagnostics</div>
<div class="col newclass">Programma Keuze</div>
<div id="kort" class="col newclass"><p id="shortprog">Kort 0000 Min</p></div>
<div id="lang" class="col newclass"><p id="longprog">Lang 0000 Min</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Parameters</div>
<div class="col newclass">Operationele stand</div>
<div class="col newclass">
<div class="switchcontainer">
<form>
<input type="submit" value="Auto">
<input type="hidden" name='"2_HMI".AUTOTEST' value="0">
</form>
<form>
<input type="submit" value="Handmatig">
<input type="hidden" name='"2_HMI".AUTOTEST' value="1">
</form>
<!--<button id="Auto">Auto</button>
<button id="Handmatig">Handmatig</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS PART
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
.header {
background-image: url('../img/test.png');
background-size: cover;
background-position: center;
position: relative;
}
.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.customTable {
padding-top: 8%;
padding-left: 2%;
width: 98%;
}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
}
.newclass {
min-width: 300px;
}
#Auto {
width: 180px;
height: 100%;
}
#Handmatig {
width: 180px;
height: 100%;
}
PS I have added a new class named "newclass" and provided a min width....please change the min-width as you like
I think your issue lies with using line-height as a vertical align, as when the text wraps, it wraps with 98px of line-height.
I would start by removing it and re-aligning it with padding etc.
I have the images at a set height and width since they are different sizes, so how do I center carousel itself?
I honestly have no clue where to start, because I don't know how to do it without screwing up bootstrap styling. Any help would be appreciated.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Balloons Flowers and Gifts</title>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=News+Cycle" type="text/css" rel="stylesheet">
<!-- Spent two hours trying to figure out why my customized CSS wouldn't load in, then realized that I put it in front of bootstrap... -->
<script src="https://use.fontawesome.com/7a267289ed.js"></script>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link rel="icon" href="img/icon.png">
</head>
<body>
<div class="container-fluid main-section">
<nav class=" navbar navbar-default">
<div class="container-fluid col-md-12 col-xs-12">
<div class="headers-bfg">
<div class="navbar-header">
<a class="navbar-brand" href="#">BFG</a>
</div>
<div class="navbar-header">
<a class="navbar-brand col-xs-2" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
<ul class=" nav navbar-nav ">
<li>Balloons</li>
<li><i class="fa fa-small fa-circle" aria-hidden="true"></i></li>
<li>Flowers</li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li>Gifts</li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li>Hours</li>
</ul>
</div>
</nav>
<div class="">
<div class="row">
<div class="col-md-12 col-xs-12 text-center main">
<h1>Balloons Flowers and Gifts</h1>
<h3>The perfect way to brighten someone's day, and make them smile!</h3>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-xs-12 text-center info-panel balloon-sect">
<h2>Balloons</h2>
<p> Our hand crafted balloon creations are a hit at every paty! We have a wide variety of colored and themed balloons ranging from Pokemon GO to a life sized stormtrooper! We also do balloon arches and towers for events!</p>
<div id="myCarousel" class="carousel center slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/f1.jpg" alt="Chania">
</div>
<div class="item">
<img src="img/f2.jpg" alt="Chania">
</div>
<div class="item">
<img src="img/f3.jpg" alt="Flower">
</div>
<div class="item">
<img src="img/f4.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel flower-sect">
<h2>Flowers</h2>
<p>Our Flowers are perfect for any occasion! We have a wide variety all year round, just be sure to call for availability! We can do prom flowers, funeral arrangements, and everything in between!</p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel gift-sect">
<h2>Gifts</h2>
<p>We have a wide variety of gifts available for purchase that range from wind chimes to <b>Decorative Vases.</b></p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel hour-sect">
<h2>Hours</h2>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
CSS
body {
font-family: 'News Cycle', sans-serif;
font-size: 175%;
}
li {
float: right;
text-align: left
}
link {
link
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #232323;
}
a:active {
text-decoration: underline;
color: #000000;
}
.main-section {
background-image: url(../img/back.jpg);
background-size: cover;
height: 1000px;
color: white;
}
.navbar {
position: fixed;
width: 100%;
}
.container-fluid {
padding-left: 0px;
}
.main {
padding: 400px 0px 360px 0px;
text-shadow: 1px black;
}
.nav {
float: right;
text-align: left;
font-size: 20px;
letter-spacing: .5px;
}
.headers-bfg {
padding-left: 35px;
}
.navbar-brand {
font-size: 20px;
letter-spacing: .5px;
}
h1 {
font-size: 70px;
}
h3 {
font-size: 35px;
}
.fa-circle {
color: gray;
font-size: .4em;
padding-top: 23px
}
.info-panel {
padding: 50px 50px 50px 50px;
}
.balloon-sect {
background-color: skyblue;
}
.flower-sect {
background-color: #f4f6f9;
}
.gift-sect {
background-color: #ce6640;
}
.carousel {
width:640px;
height:360px;
}
#myCarousel {
}
Not 100% sure this is what you want but you can take a look at this: http://www.bootply.com/t08I4ieD1s
Basically all I did was add: margin: 0 auto; to the .carousel css
.carousel {
width:640px;
height:360px;
margin: 0 auto;
}
and add:
.carousel-indicators{
width:auto;
margin: 0 auto;
}
To add space above and below you need to change the top and bottom margins. So for example you could do the following:
.carousel {
width:640px;
height:360px;
margin: 100px auto 50px auto;
}
This would add 100px above the carousel, and 50 below. Read here: http://www.w3schools.com/cssref/pr_margin.asp for more info.
Try this easy fix:
You can use bootstrap class .center-block to this line
<div id="myCarousel" class="carousel center slide" data-ride="carousel">
after adding class
<div id="myCarousel" class="carousel center-block center slide" data-ride="carousel">
bootstrap class .center-block make your element to the center horizontally with respect to its parent element.
previewI am not understanding why the Bootstrap drop down menu is not working!!! I downloaded Bootstrap to develop a custom design. The carousel is working fine, but when you click on the drop-down button the dropdown-menu jumps to the left!!! If you have the files on your computer kindly review it because it's too much code to copy here, I just copied my html and part of the bootstrap.min.css ... any advice please???
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175)
}
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
color: #262626;
text-decoration: none;
background-color: #f5f5f5
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
color: #fff;
text-decoration: none;
background-color: #337ab7;
outline: 0
}
.dropdown-menu>.disabled>a, .dropdown-menu>.disabled>a:focus, .dropdown-menu>.disabled>a:hover {
color: #777
}
.dropdown-menu>.disabled>a:focus, .dropdown-menu>.disabled>a:hover {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
background-image: none;
filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)
}
.open>.dropdown-menu {
display: block;
position:relative;
}
.open>a {
outline: 0
}
.dropdown-menu-right {
right: 0;
left: auto
}
.dropdown-menu-left {
right: auto;
left: 0
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap
}
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 990
}
.pull-right>.dropdown-menu {
right: 0;
left: auto;
}
.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
content: "";
border-top: 0;
border-bottom: 4px dashed;
border-bottom: 4px solid\9
}
.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 2px
}
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full-slider.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="footer.css" rel="stylesheet" type="text/css">
<link href="css/ancor.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="nav.js"></script>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<!-- Full Page Image Background Carousel Header -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators-hp">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url(images/home/canvas_hp_1600x900_New_Giulietta_v1_update.jpg);"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url(images/model/giulietta/canvas-2_modelpage-newgiulietta.jpg);"></div>
<div class="carousel-caption">
<h2></h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </div>
<div id="myCarousel2" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators" style="display:none;">
<li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url(images/model/giulietta/overview_modelapage-newgiulietta.jpg);"></div>
<div class="carousel-caption">
<div class=" model__content left">
<h2 class="content__title"> OVERVIEW </h2>
<div class="content__text"> <span class="animated-line"></span>
<p>REDEFINING STYLE</p>
</div>
<div class="content__descr">
<p>With new sporty exterior details, enhanced onboard experience, new interior touches and extended engine range: The Alfa Giulietta has once again reinvented itself.<br>
Even more sporty. Even more Alfa Romeo.</p>
<p> </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myCarousel3" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel3" data-slide-to="0" class="active">style</li>
<li data-target="#myCarousel3" data-slide-to="1" >exteriors</li>
<li data-target="#myCarousel3" data-slide-to="2" >interiors</li>
<li class="last" data-target="#myCarousel3" data-slide-to="3" >distinctive</li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url(images/model/giulietta/style_modelpage-giulietta.jpg); background-position:bottom;"></div>
<div class="carousel-caption">
<div class=" model__content left">
<h2 class="content__title"> ENHANCED SPORTS STYLING </h2>
<div class="content__text"> <span class="animated-line"></span>
<p>DESIGN & PERFORMANCE</p>
</div>
<div class="content__descr">
<p>The New Alfa Giulietta with its timeless elegance provides authentic Alfa Romeo driving pleasure. Why not discover this Italian masterpiece for yourself?</p>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url(images/model/giulietta/exteriors_modelpage-newgiulietta.jpg); background-position:bottom center;"></div>
<div class="carousel-caption">
<div class=" model__content left">
<h2 class="content__title"> EXTERIORS </h2>
<div class="content__text"> <span class="animated-line"></span>
<p>ALFA ROMEO'S DISTINCTIVE STYLING</p>
</div>
<div class="content__descr">
<p>From first glance, the iconic grille reflects true Alfa Romeo DNA. Every innovation of the New Alfa Giulietta highlights an Italian passion for performance and style, such as the carbon effect headlights, oversized tail pipes, and range of distinctive alloy wheels to personalise your Alfa Romeo.</p>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url(images/model/giulietta/interiors_modelpage-newgiulietta.jpg); background-position:top center;"></div>
<div class="carousel-caption">
<div class=" model__content color--light left">
<h2 class="content__title"> INTERIORS </h2>
<div class="content__text"> <span class="animated-line"></span>
<p>IGNITE YOUR PASSION</p>
</div>
<div class="content__descr">
<p>The interiors of the New Alfa Giulietta have been crafted with high quality materials such as the new Italian design upholstery and matte black grain dashboard. Refined elegance in true Alfa Romeo style.
New Alfa Giulietta. Pure Sportiness. Pure Emotion. Pure Alfa Romeo.</p>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url(images/model/giulietta/uniqueness_modelpage-newgiulietta.jpg);"></div>
<div class="carousel-caption">
<div class=" model__content left">
<h2 class="content__title"> DISTINCTIVE </h2>
<div class="content__text"> <span class="animated-line"></span>
<p>DESIGN & PERFORMANCE</p>
</div>
<div class="content__descr">
<p>The New Alfa Giulietta with its timeless elegance provides authentic Alfa Romeo driving pleasure. Why not discover this Italian masterpiece for yourself?</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: false //changes the speed
})
</script>
</body>
</html>
It is better to use CDNs:
From w3schools:
One advantage of using the Bootstrap CDN: Many users already have
downloaded Bootstrap from MaxCDN when visiting another site. As a
result, it will be loaded from cache when they visit your site, which
leads to faster loading time. Also, most CDN's will make sure that
once a user requests a file from it, it will be served from the server
closest to them, which also leads to faster loading time.
You can replace your downloaded bootstrap file links with these CDNs:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I tried your code with these CDNs and it was working.
I think there is something wrong with your script tags. Try using the CDN for jQuery and Bootstrap. This example works fine...
Edit:
If you need to override CSS you can do so by using the same class name and declaring the styles AFTER the Bootstrap styles. Example:
Bootstrap style
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
Custom style
.dropdown-menu.pull-right {
right: 20px;
}
If you need to increase the targeting use !important
.dropdown-menu.pull-right {
right: 20px !important;
}
I would not recommend changing the Bootstrap files at all.
<html>
<body>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
I'm trying to create a single scrolling webpage consisting of three pages
$('a.page-scroll').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 60
}, 1000);
event.preventDefault();
});
* {
margin-top: 0;
margin-bottom: 0;
}
#page1 {
height: 1000px;
background-color: #000;
color: white;
}
#page2 {
height: 1000px;
color: white;
background-color: #18121e;
padding-top: 140px;
border-top: 100px;
}
#page3 {
height: 650px;
color: white;
background-color: #233237;
background-size: cover;
padding-top: 200px;
}
body {
padding-top: 0px;
}
#page1 p {
padding-top: 100px;
font-size: 2.5rem;
}
#page1 p #highlight {
color: pink !important;
}
#page2 h3 {
padding-bottom: 80px;
line-height: 1.5;
}
#page3 h3 {
padding-bottom: 100px;
line-height: 1.5;
}
.btn {
color: white;
background-color: #000 !important;
}
.btn:hover {
color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Rashid Naushad</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#about">About</a>
</li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li><a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--<div class="container-fluid">-->
<div>
<div id="page1">
<a id="about"></a>
<br>
<br>
<br>
<p class="text-center">Hi !
<br>I'm a self taught web developer based in India.
<br>I'm an undergraduate student pursuing economics who just loves to <span id="highlight">code</span>.
<br>I dream of combining my knowledge of programming, economics, and
<br>financial markets for the betterment of the society.
<br>Languages and Frameworks:
<br>HTML5, CSS3, Bootstrap3,
<br>Javascript, jQuery, Angular.js, Meteor.js,
<br>Node.js, React,js,
<br>Python, php..
<br>Tools & expertise: Git, Responsive Web Design.</p>
</div>
<div id="page2">
<a id="portfolio"></a>
<h3 class="text-center">Here is my latest portfolio, <br>I'll be adding more as I learn and grow..</h3>
<!--<div class="row">
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Simple Javascript App by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Tribute to Raghuram Rajan by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
</div>-->
</div>
<div id="page3">
<a id="contact"></a>
<h3 id="contact-text" class="text-center">Think I can be of any help to you?<br>Wanna collaborate?<br>Shoot me a message, now!</h3>
GitHub
<div class="hidden-lg hidden-md">
<br>
</div>
freeCodeCamp
<div class="hidden-lg hidden-md">
<br>
</div>
Gmail
</div>
</div>
The buttons on the third page,when collapsed don't leave a space in between. How do I add space between the buttons in the small and xsmall screen sizes?I tried inserting between the buttons, but that didn't work.
Here is the JsFiddle
Add this to your CSS
#media screen and (max-width: 990px) {
.btn ~ .btn {
margin-top: 10px;
}
}
Updated fiddle
Sample snippet
$('a.page-scroll').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 60
}, 1000);
event.preventDefault();
});
* {
margin-top: 0;
margin-bottom: 0;
}
#page1 {
height: 1000px;
background-color: #000;
color: white;
}
#page2 {
height: 1000px;
color: white;
background-color: #18121e;
padding-top: 140px;
border-top: 100px;
}
#page3 {
height: 650px;
color: white;
background-color: #233237;
background-size: cover;
padding-top: 200px;
}
body {
padding-top: 0px;
}
#page1 p {
padding-top: 100px;
font-size: 2.5rem;
}
#page1 p #highlight {
color: pink !important;
}
#page2 h3 {
padding-bottom: 80px;
line-height: 1.5;
}
#page3 h3 {
padding-bottom: 100px;
line-height: 1.5;
}
.btn {
color: white;
background-color: #000 !important;
}
.btn:hover {
color: gray;
}
#media screen and (max-width: 990px) {
.btn ~ .btn {
margin-top: 10px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Rashid Naushad</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#about">About</a>
</li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li><a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--<div class="container-fluid">-->
<div>
<div id="page1">
<a id="about"></a>
<br>
<br>
<br>
<p class="text-center">Hi !
<br>I'm a self taught web developer based in India.
<br>I'm an undergraduate student pursuing economics who just loves to <span id="highlight">code</span>.
<br>I dream of combining my knowledge of programming, economics, and
<br>financial markets for the betterment of the society.
<br>Languages and Frameworks:
<br>HTML5, CSS3, Bootstrap3,
<br>Javascript, jQuery, Angular.js, Meteor.js,
<br>Node.js, React,js,
<br>Python, php..
<br>Tools & expertise: Git, Responsive Web Design.</p>
</div>
<div id="page2">
<a id="portfolio"></a>
<h3 class="text-center">Here is my latest portfolio, <br>I'll be adding more as I learn and grow..</h3>
<!--<div class="row">
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Simple Javascript App by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Tribute to Raghuram Rajan by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
</div>-->
</div>
<div id="page3">
<a id="contact"></a>
<h3 id="contact-text" class="text-center">Think I can be of any help to you?<br>Wanna collaborate?<br>Shoot me a message, now!</h3>
GitHub
<div class="hidden-lg hidden-md">
<br>
</div>
freeCodeCamp
<div class="hidden-lg hidden-md">
<br>
</div>
Gmail
</div>
</div>