I've this piece of code
<div class="col-md-3" style="border: solid 2px blue">
<div class="text-center" style="transform: rotate(-90deg); border: solid 2px red; height:35px;">
Some text
</div>
<div class="pull-right">
<img ng-src="/static/images/insegne/{{ insegna.id }}.jpg" style="width:120px; height:120px; border:solid 2px white;" ng-click="vm.onInsegnaClicked(insegna)" />
</div>
</div>
My goal is to have the div bordered to red near the div that contain the image. How I can do it? I attempt to add a pull-left class at the red div, but doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-8</div>
</div>
</div>
</body>
</html>
I think you want something or somewhere like this? See it in full screen.
Change your structure to like this and it will work .
<div class="col-md-3" style="border: solid 2px blue">
<div class="pull-right">
<img ng-src="/static/images/insegne/{{ insegna.id }}.jpg" style="width:120px; height:120px; border:solid 2px white;" ng-click="vm.onInsegnaClicked(insegna)" />
</div>
<div class="text-center pull-right" style="transform: rotate(-90deg); border: solid 2px red; height:35px;">
Some text
</div>
</div>
I did this using display flex, also without bootstrap, so is this :
.cont{
display:flex;
}
.left .right{
flex-grow:1
}
<div class="cont" style="border: solid 2px blue;padding:20px;">
<div class="left" style="transform: rotate(-90deg); border: solid 2px red; height:35px;">
Some text
</div>
<div class="right">
<img ng-src="/static/images/insegne/{{ insegna.id }}.jpg" style="width:120px; height:120px; border:solid 2px white;" ng-click="vm.onInsegnaClicked(insegna)" />
</div>
</div>
Related
This question already has answers here:
Why the content is not covered by the background of an overlapping element?
(8 answers)
Closed 2 years ago.
I'm trying to place a div on top of another but I don't understand why text inside div.servicios-info is over the image but the background-color isn't.
.imagen-servicio img {
border: 6px #ffffff solid;
}
.servicio-info {
background-color: #ec6a6a;
margin-top: -5rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<div class="imagen-servicio">
<img src="https://via.placeholder.com/300.png" class="img-fluid">
<div class="servicio-info">
<h3 class="text-uppercase">
<span class="text-lowercase">know about</span> <br> us
</h3>
read more
</div>
</div>
</div>
</div>
</div>
You can try something like this:
CSS
.servicio-info {
position: relative;
background-color: #ec6a6a;
margin-top: -5rem;
z-index:10
}
This code seems to do it.
<!DOCTYPE html>
<html>
<head>
<style>
.imagen-servicio img {
border: 6px #ffffff solid;
z-index: -1;
position: relative;
}
.servicio-info {
background-color: #ec6a6a;
margin-top: -5rem;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<div class="imagen-servicio">
<img src="https://via.placeholder.com/300.png" class="img-fluid">
<div class="servicio-info">
<h3 class="text-uppercase">
<span class="text-lowercase">know about</span> <br> us
</h3>
read more
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want to divide my div "tile-container" with the width of 100% into 5 equal pieces. I thought that creating 5 divs inside with the width of 25% would solve the problem but it didn't. Container seems to be to small. Here is my code:
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="tile-container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
</div>
</div>
</div>
</body>
And stylsheet.css file:
.tile-container{
position: relative;
border: solid #BDBDBD 2px;
margin: 5px 0px;
width:100%;
}
.tile{
width: 20%;
min-height:22px;
border: 1px #BDBDBD solid;
display: inline-block;
}
The problem is with the spacing in the html between the divs, to ignore the spacing you can add font-size:0 to the .tile-container, then use a specific font-size to the .tile :
.tile-container{
position: relative;
border: solid #BDBDBD 2px;
margin: 5px 0px;
width:100%;
font-size:0; /* add */
}
.tile{
font-size:20px; /* or whatever you want */
width: 20%;
min-height:22px;
border: 1px #BDBDBD solid;
display: inline-block;
}
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="tile-container">
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
</div>
</div>
</div>
</div>
</body>
Another method would be to comment out the spaces :
.tile-container{
position: relative;
border: solid #BDBDBD 2px;
margin: 5px 0px;
width:100%;
}
.tile{
width: 20%;
min-height:22px;
border: 1px #BDBDBD solid;
display: inline-block;
}
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="tile-container">
<div class="tile">A</div><!--
--><div class="tile">B</div><!--
--><div class="tile">C</div><!--
--><div class="tile">D</div><!--
--><div class="tile">E</div>
</div>
</div>
</div>
</div>
</body>
So I am using Bootstrap panels for my project and I have the design mockup as below:
The Profile text and progress bar should be left aligned while the collapse icon should be right aligned.
This is my markup at the moment:
<div id="panelProfile" role="tab" class="panel-heading">
<h4 class="panel-title">Profile</h4>
<div class="progress body-profile">
<div class="progress-bar">
<div class="progress-filled"></div>
<div data-bind="" class="progress-value"></div>
</div>
</div>
</div>
I tried adding float to both profile text and progress bar but this gives me this:
What is the best way to handle this without declaring expicit values?(Need to be responsive)
Have you tried using a div.row within your div#panelProfile?
<div id="panelProfile" role="tab" class="panel-heading">
<div class="row">
<div class="col-xs-2">
<h4 class="panel-title">Profile</h4>
</div>
<div class="col-xs-8">
<div class="progress body-profile">
<div class="progress-bar">
<div class="progress-filled"></div>
<div data-bind="" class="progress-value"></div>
</div>
</div>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
This code will perfectly work for you.
Add pull-right class in Minus Icon.
Add Pull-left class in Profile
To make View Complete Profile "center" add text-center class
Happy Coding :-)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<style>
.progress{
border-radius: 15px;
}
.circle-minus{
width: 5px;
height: 3px;
border: 1px solid black;
border-radius: 50%;
padding: 1px 7px;
font-size: 14px;
}
.panel-heading{
background-color: white ! important;
}
.panel-footer{
background-color: white ! important;
}
body{
padding-top: 15px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="pull-right"> 50% <span class="circle-minus">-</span></div>
<div class="pull-left">Profile </div>
<div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
</div>
</div>
</div>
</div>
<div class="panel-body" style="height: 250px;"></div>
<div class="panel-footer"><h5 class="text-center">View Complete Profile</h5></div>
</div>
</div>
</div>
</div>
</body>
</html>
This is my entire HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>A</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
body { background: url(img/dark.png) !important; position:relative; z-index:-1; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
#logo { text-indent: 515px; z-index:9999; position:relative; color:#FFCC00;}
#links {padding-top: 0.6cm;}
#custom-search-input{
padding: 3px;
border: solid 1px #E4E4E4;
border-radius: 6px;
background-color: #fff;
}
#custom-search-input input{
border: 0;
box-shadow: none;
}
#custom-search-input button{
margin: 2px 0 0 0;
background: none;
box-shadow: none;
border: 0;
color: #666666;
padding: 0 8px 0 10px;
border-left: solid 1px #ccc;
}
#custom-search-input button:hover{
border: 0;
box-shadow: none;
border-left: solid 1px #ccc;
}
#custom-search-input .glyphicon-search{
font-size: 23px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8" id="logo">
<img src="img/iconf.png" class="img-responsive" style="max-width:180px">
</div>
<div class="col-md-4" align="right" id="links">
Read books
Play
Eat
Help
</div>
</div>
<div class="jumbotron" style="background: url('img/yellow.jpg')">
<h1 align="center">Read books</h1>
<h4 align="center">Enter a bookname:</h4>
<div class="row">
<div class="col-md-6">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg" placeholder="Eg: 'Fifty Shades of Gray'" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I don't know how to align the search box to the center of the page. I have tried adding align="center" in the input tag but it doesn't work. I saw a few examples where float:center property was being used but I don't understand where I should use it in my code. Please help. Thanks you.
Replace these lines -
<div class="row">
<div class="col-md-6">
<div id="custom-search-input">
<div class="input-group col-md-12">
by these lines -
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="custom-search-input">
<div class="input-group col-md-12">
You'll have your search box centered.
To understand how this is working, visit here - http://getbootstrap.com/css/#grid-offsetting
I am having some problems creating this layout.
Demo.
This is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="row " style="">
<div class="col-md-6 news_basic_style">
<div class="newsproducts_style">
<img src="http://placehold.it/150x150">
</div>
</div>
<div class="col-md-6 news_basic_style">
<div class="newsproducts_style">
<img src="http://placehold.it/150x150"></div>
</div>
</div>
<div class="row">
<div class="col-md-6 news_basic_style">
<div class="newsproducts_style">
<img src="http://placehold.it/150x150"></div>
</div>
<div class="col-md-6 news_basic_style">
<div class="newsproducts_style">
<img src="http://placehold.it/150x150"></div>
</div>
</div>
</body>
</html>
CSS
body{
background-color:#99B3FF;
}
.news_basic_style{
border-radius: 20px;
box-shadow:5px 5px 10px rgba(0,0,0,0.65);
}
.news_basic_style{
background-color:white;
width:170px;
margin:20px;
}
update
Thanks for the edit TRiG
solution demo:
Apply the border-radius and box-shadow directly to the image and remove the background, like so:
img{
border-radius: 20px;
box-shadow:5px 5px 10px rgba(0,0,0,0.65);
}
http://jsfiddle.net/LrmfU/