Hello I would like to have a row (in blue) in a col-lg-4 div (in red) in another row (in yellow), like this:
Here is what I have tried:
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container-fluid" style="height: 400px;background-color: yellow">
<div class="row">
<div class="col-lg-4 col-lg-offset-1" style="background-color: red;">
<div class="row" style="padding-top:20%;padding-bottom: 20%;background-color: blue;">
dddd
</div>
</div>
</div>
</div>
</body>
</html>
with this css:
.navbar {
margin-bottom: 0 !important;
background-color: white;
}
.row1 {
background: url("appart.jpg");
background-size: 100% 400px;
background-repeat: no-repeat;
}
[class*="col-"], footer {
background-color: lightgreen;
opacity: 0.5;
line-height: 400px;
text-align: center;
}
But I get this:
Despite that the colors get mixed up (if you have a solution to prevent this also It would be cool) I can't have the result that I am looking for...
much thanks
I have posted the jsfiddle code with the solution
In your css remove the class attribute rule [class*="col-"].Try targeting the rules to the specific elements using css. You are converting all the columns to have a line-height of 400px that's why your final html looks like that. And Don't use inline styles
If you remove the [class*="col-"] and add the following in the css file you will get the desired result
.container-fluid > .row, .col-lg-4.col-lg-offset-1 {
height: 100%;
}
.col-lg-4.col-lg-offset-1 > .row {
top: 50%;
transform: translateY(-50%);
position: relative;
text-align: center;
}
Fiddle demo
https://jsfiddle.net/karthick6891/4js3r3hd/
Related
I am new to SVG apologies! I am having an issue with an SVG where I have it set to max-width: 60% but it seems to take precedence over the overall height of the elements.
I want it so the overall height of the row is 50vh. But even if I set it and remove the max-width from the SVG it still is taking precedence over the set vh. If anyone has any suggestions on the best way to approach this?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="safetyFreelancer.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<style>
body {
background: #f3f4f5;
}
.wave-container {
position: relative;
background: #ce1212;
color: #FFF;
text-align: center;
overflow: hidden;
}
.wave-container > svg {
display: block;
background: #ce1212;
}
.vh {
height: 50vh !important;
}
</style>
</head>
<body>
<div class="wave-container">
<div class="row vh">
<div class="col-md-6">
<h1 class="text-center">Welcome</h1>
</div>
<div class="col-md-6">
SVG
</div>
</div>
SVG
</div>
</body>
</html>
I did not enter the SVGs as it maxes out the character count
If I undestood correclty you want to set width for your svg. If yes, then you can just set through this new rule:
.col-md-6.test > svg {
width: 50%;
}
The jsfiddle example can be seen here.
I have an HTML page where I have a div called container, I'm trying to use bootstrap here. Inside the container, I have a div called row. When I try to apply a background color to the div the color is applied only to the div content and spans only the width and not the height. I'm trying to apply the background to the hellow world to cover the whole page.
Here is the code.
.container {
padding: 10px;
}
.row {
background-color: darkgray;
}
<!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">
<link rel="stylesheet" href="css/homePage.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">
<div class="row"> Hello World! </div>
</div>
</body>
</html>
Try this:
1st: The html element has a default margin that you have to deal with every time you write a page.
2nd:You may not want use jsfiddle to test code when using bootstrap css (or any other library for that sake). As the JSFiddle code is run before the bootstrap code.
3rd: Try this:
body,html{
margin:0;
width:100%;
}
html{
background-color: gray;
}
.container {
padding: 1em;
max-width:750px;
min-height:100vh;
width:90%;
margin: auto;
box-sizing:border-box;
background-color:aquamarine;
}
.row {
margin:0;
padding-left:20px;
}
<html>
<body>
<div class="container">
<div class="row"> Hello World! </div>
<div class="row"> Hello , I am World! </div>
</div>
</body>
</html>
Just apply it to the body.
body{
background-color: red;
}
Maybe this is what you need.
.container {
margin-left:-20px;
padding-left:30px;
margin-right:-20px;
background-color: darkgray;
}
.row {
background-color: darkgray;
}
body{
background-color: red;
}
<div class="container">
<div class="row"> Hello World! </div>
</div>
You can make the container to cover from top to bottom and set the gaps that you need left and right:
.container {
position: absolute;
top: 0px;
left: 10px; /* Gap left */
right: 10px; /* Gap right */
bottom: 0px;
background-color: black;
}
May this one you need:
html,body {
padding: 0;
margin: 0;
background-color: red;
}
.row {
background-color: darkgray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="row"> Hello World! </div>
</div>
</body>
Seems nice to me:
html {
background-color: darkgray
}
.row {
background-color: darkgray;
}
<!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">
<link rel="stylesheet" href="css/homePage.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">
<div class="row">Hello World! Here goes some content</div>
</div>
</body>
</html>
Here's my code
header img{
width:10%;
vertical-align: middle;
}
header h1{
text-align: right;
display:inline;
position: absolute;
}
header {
width : 100%;
height: 1% ;
background: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href = "css\main.css" >
<link rel="stylesheet" href="css\responsive.css">
</head>
<body>
<header>
<div class = "container-fluid">
<img src="https://pixabay.com/static/uploads/photo/2015/12/15/09/31/badge-1093966_640.png" alt="">
<h1>KUNAL MEHTA</h1>
</div>
</header>
<section>
</section>
<footer>
</footer>
<script src = "js/main.js"></script>
</body>
</html>
What i am talking about is that i want the h1 to go to right and they both should align in the center of the parent Element.i am using BOOTSTRAP so answers with bootstraps are encouraged
Well, you can always use flex for that- And I truly recommend using it, since it makes the solution much cleaner and easier to maintain. Please note I only had to change the container element for making this solution, and clean the h1 margin.
.container-fluid {
display: flex;
justify-content: space-between;
align-items: center;
height: 100px
}
.container-fluid h1 {
margin: 0
}
header {
background: red;
}
header img{
width:10%;
}
You can read more about it here
I'm going to try to explain this the best that I can. This picture represents the layout I'm trying to achieve.
I'm trying to have a navbar on the side. I'm using bootstrap so this is about a col-md-3 for row layout. I'm able to get it into my document, but what I am having a hard time with is layering this nav bar on top of the body tag.
I have a body tag that has an image set to the background with no-repeat and background-size 100% and all of that. But it always covers the nav bar. How can I get the navbar (as well as other elements) to layer on top of it. I was hoping that I could do this with z-index, but after half an hour of playing around with this, I think maybe I don't understand z-index nearly as much as I thought it did.
Heres my html:
<!DOCTYPE html>
<html lang="en">
<head>
<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.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class = "navWrap row">
<div class = "col-md-3">
<div class = "brand">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Heres my CSS:
body {
background-image:url(img/carousel-lifestyle.jpg);
background-size: 100%;
position: fixed;
background-repeat: no-repeat;
position: fixed;
z-index: -1;
}
.col-md-3 {
background-color: white;
position: absolute;
z-index: 1;
}
.brand {
background-image:url(img/Screen%20Shot%202015-10-26%20at%205.38.31%20PM.png);
background-size: 100%;
background-repeat:no-repeat;
width: 75px;
height: 200px;
padding:20px 100px 20px 10px;
margin-left: 25px;
}
Thanks in advance!
My result: http://i.imgur.com/P50RS.png
My style.css
body {
background: url("img/bgs.png") repeat #cccccc;
color: #000000;
}
main {
margin-left: auto;
margin-right: auto;
}
My index.html
<html>
<head>
<title>Progress</title>
<link rel="stylesheet" href="css3-progress-bar.css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<div id="main">
<p><b>215/160 LBS.</b></p>
<div class="bar_mortice rounded green_mortice">
<div class="progress rounded green" style="width: 05%;"></div>
</div>
</div>
</body>
</html>
Why is the text not centering? Also, the progress bar was not centering until I added the
margin: 0 auto;
I tried that under main but no luck. Any ideas?
In the css, you need to use #main instead of just main.
Also, you'll want to give it some width, otherwise it may take up the entire width. Try this:
#main {
margin-left: auto;
margin-right: auto;
width: 50%;
}