I have a question about the grid system in Bootstrap. I seems to work great, but there are no margins between the "boxes". for example if I have this:
<div class="column">
<div class="span11">
</div>
<div class="span11">
</div>
</div>
This works great. But there is no space between then. So do I assign an "id" and edit it myself though CSS code? Is this the right way to do it? for example:
<div class="column">
<div id="box_1" class="span11">
</div>
<div id="box_2" class="span11">
</div>
</div>
and one more thing, as for borders, colors, do I do the same ?
thanks
First there's no .column in twitter bootstrap but .row
If you want left/right margin use a span10 with offset1
If you want top/bottom margin creat a new .row and apply a class like .show-grid
For borders and colors use classes for generic and ids for specific.
You can create your mockup on jsFiddle like this http://jsfiddle.net/baptme/EHutn/
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<style>
.show-grid {
margin-bottom: 20px;
margin-top: 10px;
}
.show-grid [class*="span"] {
background-color: #EEEEEE;
border-radius: 3px 3px 3px 3px;
line-height: 30px;
min-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row show-grid">
<div class="span10 offset1">
<p>bla bla bla</p>
</div>
</div>
<div class="row show-grid">
<div class="span10 offset1">
<p>bla bla bla</p>
</div>
</div>
</div>
</body>
</html>
Related
How do I fix This navbar issue in my website. If you Check This link (http://ibrahim.techrms.com/), You will find that the navbar Buttons are squished together in the home page. The same code is in the pages "About us" and "Contact us". But the navbar in the "About us" and "Contact us" pages are not squished together.
This is the code:
<!DOCTYPE html>
<html>
<head>
<title>Tecmarks</title>
<link rel="stylesheet" type="text/css" href="tecmarks.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.dropbtn {
background-color: darkgrey;
color: white;
padding: 20px;
font-size: 15px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: whitesmoke;
padding: 20px 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {display: block;}
</style>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top" style="background-color: lightgrey">
<div class="container">
<a class="navbar-brand" href="http://tecmarks.com/"><img src="images/logo (1).png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
</a>
</li>
<li class="dropdown">
<button class="dropbtn">Company</button>
<div class="dropdown-content">
About us
</div>
</li>
<div class="dropdown">
<button class="dropbtn">Our Solutions</button>
<div class="dropdown-content">
Human Resources & Payroll
Time Attendance
Time Sheet Managment
Website Design & Development
Domain & Hosting
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Our websites</button>
<div class="dropdown-content">
Tecmarks
ibrahim.techrms
Feuger
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="contact-us.html">Contact us</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Sorry but it wasn't a problem the thing was that is was a responsive navbar and it joins together in smaller views in mobiles and all it will become a dropdown button.
Sorry about the question. If you liked the question please vote for it :)
I only have one badge and 11 points.If you liked my website you can enable notifications and I'll let you know if i changed it or not. If you want you could tell me how my website looks like from your point of view. If you didn't like it then you can tell me what changes I Should do in the website then I'll let you know when I edited the website. I am a beginner in making websites This is a website that I am making for a company,Tecmarks.com
Please am trying to create a front page with a sliding image and the text and button on it remain in same position while images slide underneath the text and button..
solution i found online are not helpful
One way to do it is setting the content you want to remain static to fixed. Place all the content inside a wrapper so you dont need to manually position each element.
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
.container {
height: 100%;
width: 100%;
}
.container img{
height: 100%;
width: 100%;
}
.fixed {
width: 100%;
position: fixed;
z-index: 999;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="fixed">
<p class="lead" style="color: white;">Hello! I'm text.</p>
<button class="btn">PRESS</button>
</div>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/ZJSCDFRHOO.jpg" alt="Image" style="width:100%;">
</div>
<div class="item">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/ZJSCDFRHOO.jpg" alt="Image" style="width:100%;">
</div>
<div class="item">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/ZJSCDFRHOO.jpg" alt="Image" style="width:100%;">
</div>
</div>
</div>
</div>
</body>
</html>
I'm not new to the bootstrap 3 grid system, but previously only worked with stacked columns on mobile.
Today I need a grid with a single column on mobile, taking the full width (no scrollbars). On larger devices, the column should be centered (offsetted ?) while an appropriate width is maintained.
How can I do that ?
So far I have tried the following :
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-3">
... content ...
</div>
</div>
</div>
This is looking fine on desktop and mobile, but then I realized I have scrollbars on mobile.
Could it be surrounding html (not shown here) ? Or is it related to this code ?
Thanks in advance.
Here's two solutions.
The first solution sets the max-width of your column to a fixed number of pixels (in this case 650px);
The second solution set the max-width of the column to a certain percentage of the window until you reach a breakpoint and it sets it to 100%.
Solution 1 (run it full screen and change the window width to see it in action):
.constrain {
max-width: 650px;
margin-right: auto;
margin-left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="constrain">
<div class="row">
<div class="col-md-12" style="background-color: coral;">
Content
</div>
</div>
</div>
</div>
Solution 2 (run it full screen and change the window width to see it in action):
.constrain {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
#media only screen and (max-width: 650px) {
.constrain {
max-width: 100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="constrain">
<div class="row">
<div class="col-md-12" style="background-color: coral;">
Content
</div>
</div>
</div>
</div>
I can not seem to get the background images to work on the carousel. Everything else seems to be working but I cannot get the those to work.
<!DOCTYPE html>
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
This is where I have place the css in order to set the background size and what image I plan to use for each slide. I have checked and rechecked to make sure the path to the image is correct and it is 100 percent.
<style type="text/css">
.slide1{
background-image: url('images/image01.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.slide2{
background-image: url('images/image02.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.slide3{
background-image: url('images/image03.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"> </li >
<li data-target="#theCarousel" data-slide-to="1"> </li>
<li data-target ="#theCarousel" data-slide-to="2"> </li>
</ol >
And here is where I used the classes that connect to the specific slides. It seems to me like I have the code correctly typed, but still can't seem to figure out why the images will not show.
<div class="carousel-inner">
<div class="item active" >
<div class ="slide1"></div>
</div>
<div class="item">
<div class="slide2"></div>
</div>
<div class="item">
<div class="slide3"></div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"> </span>
</a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I was able to get them to work by setting the height and width of the div (to 100% in my case). It seems like maybe if there is nothing included in the carousel-item, its default size is 0 so the background image is not visible.
I'm using Bootstrap 4 and I applied the background directly to the carousel-item div, but if you added a width: to your existing slide1, etc. classes, it might work as well.
.carousel-item {
height:100%;
width:100%;
}
<div class="carousel-inner">
<div class="carousel-item active slide1" >
</div>
</div>
or
.slide1{
background-image: url('images/image01.jpg');
height: 500px;
width: _____;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
For some odd reason scrollspy is causing my second list item to be active on page load instead of the first one. It's weird because after I scroll a bit with the mouse it will make the correct list item active. Aside from this error it functions perfectly. If someone could help me out it would be greatly appreciated.
Heres my 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">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="111">
<header id="home">
<nav class="navbar navbar-default navbar-fixed-top cbp-af-header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
Determined Divas
<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="home" class="active">Home</li>
<li>About</li>
<li>Who We Are</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" id="content">
<!-- Home page row -->
<div class="row" id="home">
<div class="fill" style="background-image:url(img/LP/pathways_12.jpg)"></div>
</div>
<!-- About Section -->
<section class="row" id="about">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>About</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Who We Are Section -->
<section class="row" id="whoWeAre">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Who We Are</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Gallery -->
<section class="row" id="gallery">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Gallery</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Contact-->
<section class="row" id="contact">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Contact</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Scripts to animated the nav -->
<script type="text/javascript" src="js/Animated Header/classie.js"></script>
<script type="text/javascript" src="js/Animated Header/cbpAnimatedHeader.js"></script>
<!-- Smooth Scrolling -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- Script for full screen bg image -->
<script src="js/fillscreen.js"></script>
</body>
</html>
Heres the CSS:
body{
position: relative;
background-color: #FFF2E2;
color: white;
font-family: 'Raleway', sans-serif;
/*Keeps page content under the header, must match navbar height*/
/*padding-top: 75px; */
}
/*NAV STYLING*/
.navbar-default{
height: 76px;
transition: all 0.5s;
-webkit-animation: all 0.5s;
}
.navbar-default .navbar-nav{
font-weight: bold;
}
.navbar-default .navbar-brand {
color: white;
font-size: 2.0em;
font-family: 'Poiret One', cursive;
font-weight: bolder;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar-default .navbar-nav>li>a:hover {
color: #777;
}
.navbar-default {
background-color: #E498AF;
}
/*Controls active nav items*/
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus {
color: #777;
}
/*Animate nav on scroll*/
.cbp-af-header-shrink{
height: 51px;
}
/*Full screen image styles*/
.fill{
background-size: cover;
background-position: center;
}
/*Title Row Styling*/
.title-row{
height: 100px;
color: #777;
background-color: #FFF2E2;
text-align: center;
}
/*Content row styling*/
.content-row{
height: 600px;
background-color: white;
}
that is because you have
<body data-spy="scroll" data-target=".navbar" data-offset="111">
data target of navbar class but you html markup has
<div id="navbar" class="collapse navbar-collapse">
id navbar; switch either one and should work.
bootstrap scrollspy will look for a target then default to a nav if it cant find the target or if a target is not specified. Its also better to put the scrollspy on a div that only contains the navigation
here is a fiddle example