I am a newbie to bootstrap world. Is there a way to put watermark using Bootstrap ? If there is please help me out with a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Watermark sample code</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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<div class="panel panel-primary">
<div class="panel-heading">
Watermark sample code
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
First Line
</div>
<div class="col-lg-12">
Second Line
</div>
<div class="col-lg-12">
Third Line
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You Can Put Watermark in Body Tag or use this code inside div.
Change Opacity As Per Your Requirement From Between 0 to 1
body {
display: block;
position: relative;
height:100%;
width:100%;
}
body::after {
content: "";
background:url(https://www.google.co.in/images/srpr/logo11w.png) no-repeat;
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
height:100%;
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Watermark sample code</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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<div class="panel panel-primary">
<div class="panel-heading">
Watermark sample code
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
First Line
</div>
<div class="col-lg-12">
Second Line
</div>
<div class="col-lg-12">
Third Line
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I have 5 buttons. With Fetch, the api is fetched and written to the screen. I want the top 50 countries to be listed when I click on button 1. After that, when you press button number 2, the countries between 50-100 should appear on the screen. In this order, I want to remove 250 countries 50-50 when each button is clicked
const row = document.querySelector('.row');
const buttons = document.querySelectorAll('button')
fetch('https://restcountries.com/v3.1/all')
.then(res=>res.json())
.then(data=>{
let card = "";
data.map(item=>{
card+=`
<div class="col-md-4">
<div class="card" >
<img height="300" src="${item.flags.png}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.name.common}</h5>
<p class="card-text">${item.capital}</p>
Go somewhere
</div>
</div>
</div>
`
})
row.innerHTML = card;
});
<!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">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<section>
<div class="container mt-5">
<div class="row g-5"></div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
I have a personal website where I recently added a carousel on the left and text on the right.
Because I added the carousel (previously it was just a static photo), the text is pushed to the next line.
Here's my code:
#profile{
background-color:white;
margin-top:30px;
margin-bottom:10px;
}
#introduction{
background-color:white;
margin-top:50px;
}
.carousel-inner > .item > img {
width:40%;
height: auto;
margin-top:70px;
margin-right:30px;
float:left;
}
<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js" type="text/javascript"></script>
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="container" id="profile">
<div class="device-md hidden-xs"> </div>
<div class="col-md-12">
<div class="container">
<div class="col-md-6">
<div id="carouselSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="First slide">
</div>
</div>
<div class="item">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Second slide">
</div>
<div class="item">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Third slide">
</div>
</div>
</div>
</div>
<div class="col-md-6" id="introduction">
<p class="lead">Some lame text here </p>
</div>
</div>
</div>
</body>
</html>
I know Bootstrap has a 12-column layout, so I set my carousel to 6 and my text to 6. What did I do wrong?
1.do not use more than one container class.
2.use row class to reserve a row and then use column class [2 of 6]. - optional
3.main thing is you placed <div class="carousel-inner"> for only one item class.use it outside all item class
<!DOCTYPE html>
<head>
<style>
#profile{
background-color:white;
margin-top:30px;
margin-bottom:10px;
}
#introduction{
background-color:white;
margin-top:50px;
}
.carousel-inner > .item > img {
/*width:55%;*/
height: auto;
text-align: center;
}
</style>
<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" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="container" id="profile">
<div class="row">
<div class="col-md-6">
<div class="col-md-6">
<div id="carouselSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="First slide">
</div>
<div class="item">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Second slide">
</div>
<div class="item">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Third slide">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6" id="introduction">
<p class="lead">Some lame text here </p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js" type="text/javascript"></script>
</body>
Hey guys im using bootstrap and i wanted to have text in one div but where i write more than the width of the div the text goes out instead of appear or the next line ... here is my html:
<!Doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>AGORA</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="SITE.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row entete">
</div>
<div class="row">
<!-- PROFIL -->
<div class="col-md-5">
<!-- PHOTO ET PRES -->
<div class="row">
<!-- PHOTO -->
<div class="col-md-3" style="padding:0;"><img src="profil.jpg" class="img-responsive"></div>
<!-- PRESENTATION -->
<div class="col-md-9">
<p>PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</p>
</div>
</div>
<!-- INFOS DU MEC -->
<div class="row bordure"></div>
<!-- NIVEAU TROPHEES ET CENTRE INTERET -->
<div class="row bordure"></div>
</div>
<!-- DEBATS -->
<div class="col-md-7">
<div class="row bordure"></div>
<div class="row bordure"></div>
</div>
</div>
</div>
</body>
</html>
and my css :
*{
padding:0;
}
.container-fluid{
border: 1px solid; box-sizing: border-box; height:100%;
}
.entete{
height:100px;
background-color: blue;
}
I do not understand while the text in the div doesnt stay in it ...
Thanks for help !
here is the code for it:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<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">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<header style="background-color: blue">
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<div class="container-fluid img-responsive">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-xs-4 col-sm-4 col-lg-4 col-xl-4" ><img src="https://www.listefit.com/wp-content/uploads/2017/12/tiny-png-google-g%C3%B6rsel-optimizasyonu.jpg" width="200px" height="200px"></div>
<div class="col-xs-8 col-sm-8 col-lg-8 col-xl-8" style="word-wrap: break-word ">PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</div>
</div>
<script src="" async defer></script>
</body>
</html>
check the fiddle now:https://jsfiddle.net/77qmh8zm/
I'm trying to learn Bootstrap Grids, I think I did the correct use of Grids but my code isn't producing the result I expected in Chrome, although it looks correct in Codepen. My code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Testando Grids</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<!-- CSS -->
<style type="text/css">
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="red col-md-8">8</div>
<div class="blue col-md-4">4</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
What I expected (and what I get in Codepen):
What I've got:
your code is fine, but you have given a wrong bootstrap.min.css path , check your console, here is your updated code, view in full page
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="red col-md-8">8</div>
<div class="blue col-md-4">4</div>
</div>
</div>
I'm using bootstrap. I need to move the columns as in the attached image.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>EE</title>
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-3 col-sm-6 col-md-push-3">
<div class="alert alert-info" style="width:10px">2</div>
</div>
<div class="col-md-3 col-sm-6 col-md-push-6">
<div class="alert alert-info " style="width:10px">4</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="alert alert-info " style=" width:10px">3</div>
</div>
<div class="col-md-3 col-sm-6 col-md-pull-8">
<div class="alert alert-info" style="width:10px">1</div>
</div>
</div>
</body>
</html>
Did you try using .col-md-push-* and .col-md-pull-*? Example here: http://www.schmalz.io/2014/10/08/Column-Ordering-in-Bootstrap/