I can't find what I did wrong. The syntax looks okay but Netbeans shows an error every time I call a class from bootstrap. Is something wrong with my settings? Help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style=" background-image : url('2.png'); background-repeat: repeat;">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-12">
<img src="logo_final.png" alt="logo" style="width:100px; height:100px; margin-left: 45%;"><br/> <br/>
</div>
</div>
</div>
Check https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css this link on your browser find col-12 class. It is not present there so it's not working.
You can replace col-12 with col-lg-12 and align-items-center with text-center as below snippet. It's working in below snippet.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style=" background-image : url('2.png'); background-repeat: repeat;">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<img src="https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg?sz=48" alt="logo" style="width:100px; height:100px;"><br/> <br/>
</div>
</div>
</div>
</body>
Try changing this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
To this
<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/3.3.1/jquery.min.js"></script>
Related
I'm in the process of learning bootstrap, and I seem to be stuck at one of the most basic things - vertical alignment of columns. I am trying to get content to be anything but aligned at the top, but failing miserably.
I rewrote my code multiple times, but got no result. I started a new html document with just the code from bootstrap's documentation, but everything is still aligned at the top of the document. What am I missing here?
<!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.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container text-center">
<div class="row align-items-end">
<div class="col">
should be bottom - One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
You're looking for the align-items-start class in Bootstrap.
<!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.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container text-center vh-100">
<div class="row align-items-center h-100">
<div class="col">
should be bottom - One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
To align all the items inside a grid we have multiple classes.
1. All the item's text starts from the start with align-items-start
<!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.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container text-center">
<div class="row align-items-start">
<div class="col">
should be bottom - One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
All the items aligned vertically at the center with the align-items-center class
```
<!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.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container text-center">
<div class="row align-items-center">
<div class="col">
should be bottom - One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
```
**All text elements will be aligned at the end of the grid with align-items-end class **
<!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.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container text-center">
<div class="row align-items-end">
<div class="col">
should be bottom - One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
you can see all the alignments classes here
https://getbootstrap.com/docs/5.0/utilities/flex/#align-items
I am using the container-lg class of Bootstrap, and I am experiencing the current situation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6" style="background-color: red;"></div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
I am trying to horizontally align the text of the left div with the header's one, without affecting to the right container, which must have a width of 100% without paddings or margins.
This is what I have tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="container-lg py-5">
<div class="row" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6" style="background-color: red;"></div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
But, as you can notice, this is not my expected behavior, because it affects to the right container.
Any ideas?
Yes, enjoy both of the worlds by using absolute positioning. It's not that awful.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="containers-container position-relative">
<div class="container-fluid-lg">
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
</div>
<div class="col-md-6" style="background-color: red;">
</div>
</div>
</div>
<div class="container-lg position-absolute" style="left:0; right:0; top:0;">
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6">
<h2>Right</h2>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
I want a specific display depending on whether I have an image or not in a row bootstrap.
I want when I have an image and text content, I can have in the same row for a column size 4 my image and right my text content with a column size of 8
enter image description here
According to the display below and if the image is not there I can have instead of the image the content.
<div class="container ">
<div class="row ">
<div class="col-md-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
<div class="col-md-8">
<div>
textdffjjfjfjfj
</div>
</div>
</div>
</div>
How can I do it
use align-items-center as class in parent div. here is the snippet
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container ">
<div class="row align-items-center">
<div class="col-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
<div class="col-8">
<div>
textdffjjfjfjfj
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
use align-items-center as class in parent div. here is the snippet
and if you want to remove image then you have to add style of some specific height so it will align all items in center according to the height.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container ">
<div class="row align-items-center">
<div class="col-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
<div class="col-8">
<div>
textdffjjfjfjfj
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
I have a sidebar in admin panel. And I try for this sidebar height be 100%, but I did not solve my problem.
<html class="h-100">
<head>
<title>Admin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body class="h-100">
<div class="row h-100">
<div class="col-md-2 h-100 bg-dark" id="sidebar"></div>
<div class="col-md-10"></div>
</div>
</body>
</html>
add this to your style sheet
#sidebar{
height:100vh;
}
Full Code
<html>
<head>
<title>Admin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-2 bg-dark" id="sidebar"></div>
<div class="col-md-10"></div>
</div>
</body>
</html>
I'm trying to apply my own class to a div with bootstrap but it isnt working.
This is my header
<section class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8">
<h1 class="titulo-blog">CheeseBlog</h1>
<small>Un poquito sobre mí, es decir, nada interesante</small>
</div>
<div class="col-md-4 col-lg-4 pull-right hidden-xs hidden-sm redes">
<img src="img/twitter4.png" alt="">
<img src="img/googleplus4.png" alt="">
<img src="img/youtube4.png" alt="">
<img src="img/facebook4.png" alt="">
<img src="img/instagram4.png" alt="">
<img src="img/skype4.png" alt="">
</div>
</div>
</div>
</section>
and this is the class "redes" that i want to apply to my div
.redes{
margin-top:35px;}
and these are my imports
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=">
<title>CheeseBlog</title>
<!--Ficheros JS-->
<script src="js/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/miJavascript.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<!--Ficheros CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link href='http://fonts.googleapis.com/css?family=Signika&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap-select.min.css">
<link rel="stylesheet" href="css/estilos.css">
<script>
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
</script>
I Hope someone can help me!
Thanks!