I have the following code on my _Layout.cshtml page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - FeeCalc</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/FeeCalc.styles.css" asp-append-version="true" />
</head>
<body style="background-color:cadetblue">
<header>
<nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; ">
<div class="container-fluid">
<span class="navbar-brand" style="display:flex;">
<a href="https://www.google.com/">
<img src="~/Img/Infoorange.png" alt="ACR" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
</a>
<span style="font-size:25px;color:white;"><span style="color:#e9c46a">SpringField</span><br />company Name</span>
</span>
</div>
</nav>
</header>
<div class="container-bg">
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
</div>
This page looks like this:
I want to put a container in center of white color just like this:
so that I can put HTML control inside the white space. In order to achieve this. I tried to write the following code:
<div style="margin-top: 70px;position:relative;top:50px">
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%;" class="container" >
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
</div>
nothing seems to appear on the page. the page looks the same with no color on the container. How can I make a white color center container on this blue color page.
Any help will be greatly appreciated.
I checked your code, and it seems your container-bg class with the white colored background under navbar-brand class.
Add margin-top: 100px; to container-bg class.
<div class="container-bg">
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%; margin-top: 100px; height: 90px;" class="container">
<main role="main" class="pb-3">#RenderBody()</main>
</div>
</div>
Related
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 14 days ago.
I'm trying to make each sections content centered. How do I do this?
see attached image:
section 1 100vh, content in middle of page
section 2 100vh, content in middle of page
.content {
height: 100vh;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
</head>
<body>
<section class="content" style="background-color: lightgreen;">
<div class="container">
<div class="row">
<div class="col-lg-6 text-center text-lg-start">
<h1>heading</h1>
<p>test</p>
</div>
<div class="col-lg-6">
<img src="https://via.placeholder.com/350/09f/fff.png" />
</div>
</div>
</div>
</section>
<section class="content" style="background-color: moccasin;">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1>heading</h1>
<p>test</p>
</div>
<div class="col-lg-6">
<img src="https://via.placeholder.com/350/09f/fff.png" />
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
using bootstrap v5.3.0-alpha1
You need to use the flexbox property to center the content of the both section:
.content {
height: 100vh;
display: flex;
align-items: center;
}
I have this code
https://jsfiddle.net/kxrmcpzn/
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Landing Page</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Place favicon.ico in the root directory -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<style type="text/css" media="screen">
.flex-even {
flex: 1;
}
.hero,
.navbar {
background-color: #1f2937;
color: #f9faf8;
}
</style>
<body>
<div class="container">
<div class="navbar">
<div class="logo">Header Logo</div>
<div class="navbar-items">
header link one
header link two
header link three
</div>
</div>
<div class="hero d-flex">
<div class="flex-even">
<h1>This website is awesome</h1>
<p>
This website has some subtext that goes here under the main title.
It's a smaller font and the color is lower contrast
</p>
<button class="btn btn-primary">Sign up</button>
</div>
<div class="flex-even">
<img src="https://via.placeholder.com/350x150" />
</div>
</div>
<div>
<h2 class="fw-bold text-center">Some random information</h2>
<div class="d-flex">
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
</div>
</div>
<div>
<p>
This is an inspiring quote, or a testimonial from a customer. Maybe
it's just filling up space, or maybe people will actually read it. Who
knows? All I know is that it looks nice.
</p>
<p class="fw-bold">-Thor, God of Thunder</p>
</div>
<div class="d-flex bg-primary text-white p-3 rounded">
<div>
<p class="fw-bold">Call to action! It's time!</p>
<p>
Sign up for our product by clicking that button right over there
</p>
</div>
<div>
<button class="btn btn-light">Sign up</button>
</div>
</div>
</div>
</body>
</html>
I want the width of each element inside outer div is full page width 100% like this
https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/project/odin-project.png
I try using class container-fluid but the text will not be inside container
You could combine container-fluid and container:
<div class="container-fluid navbar">
<div class="container">
...
</div>
</div>
I'm creating cross-platform mobile application with Framework7. I made modal Login screen like in tutorial from https://www.tutorialspoint.com/framework7/login_screen_start_app.htm
The code of my index.html with this login modal:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
<title>App Title</title>
<link rel="stylesheet" href="styles/framework7.min.css">
<link rel="stylesheet" href="styles/my-app.css">
<link rel="stylesheet" href="styles/icons.css">
</head>
<body>
<div id="app">
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar"></div>
<div class="panel-overlay"></div>
<div class="views">
<div class="login-screen modal-in">
<!-- Default view-page layout -->
<div class="view">
<div class="page">
<div class="page-content login-screen-content" style="background: whitesmoke; align-items: center;">
<div class="block-header">Login</div>
<!-- Login form -->
<div class="list color-theme-blue">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Имя пользователя</div>
<div class="item-input-wrap">
<input type="text" name="username" placeholder="Имя пользователя" required validate>
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Пароль</div>
<div class="item-input-wrap">
<input type="password" name="password" placeholder="Пароль" required validate>
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<div class="list">
<ul>
<li>
<div class="row justify-content-space-around">
<button class="col-80 button button-fill color-gray">Войти</button>
</div>
</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/framework7.min.js"></script>
<script src="js/my-app.js"></script>
</body>
</html>
My problem is that login's form stays on the top of screen but I want to see it in the middle. To achieve this I've tried some framework css align classes from https://framework7.io/docs/typography.html but it didn't bring any effect. So I need your help to solve this issue
give some width to your login-screen-content div and make it center using margin:0 auto
.login-screen-content {
width: 400px;
margin: 0 auto;
}
or create one div and put your login form there and use above css to it
I have provided the code snippet
here i want to display the marque below logo but it is covering the whole header.
Visit here
use display: inline-block and width: 100%; on alert-info div it will work fine that you want.
UPDATED
You missed at least a container-fluid style declaration. See your snippet updated, here https://www.w3schools.com/code/tryit.asp?filename=FEL4BAHI14YZ.
Code:
<!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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="bootstrap-overrides">
<header class="container-fluid">
<div class="header">
<img width="300" class="img-responsive" style="height: 120px; float:left" src="images/logo.jpg" />
<button class="btn btn-primary pull-right">BUTTON</button>
</div>
</header>
<div class="container-fluid">
<form id="frm" runat="server" class="form-horizontal">
<div class="alert alert-info" role="alert" style="color: red">
<marquee>Welcome To IDB WEB APPLICATION. All (*) Fields Are Mandatory</marquee>
</div>
</form>
</div>
</body>
</html>
Hope this helps.
Updated- Just wrap your header and alert-form individually inside a container-fluid with a row. Thats the best solution using bootstrap.
below is the wokring code. For logo I am using dummy image
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<div class="container-fluid">
<div class="row">
<div class="header">
<img width="300" class="img-responsive" style="height:120px; float:left;" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />
<button class="btn btn-primary pull-right">BUTTON</button>
<!--- Remove this inline style style="height: 120px; float:left" -->
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<form id="frm" runat="server">
<div class="alert-info" role="alert" style="color: red">
<marquee>Welcome To IDB WEB APPLICATION. All (*) Fields Are Mandatory</marquee>
</div>
</form>
</div>
</div>
When i zoom in and out on my website, the navigation bar and my "Open Touch" text seems to go out of the div and float down and for my navigation bar, it seems to disappear word by word when i zoom in. I've been trying to fix this for the past 2days and researching on this website and nothing seems to work.
My code and codepen will be available as well
How can I keep the "Open Touch" Text from overlapping the navigation bar?
Demo: http://codepen.io/anon/pen/xqLLeJ
html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
<body>
<!-- Section for Jobs Popup -->
<div id="job-popup">
<div class="x-div"><img class="x-icon1" id="fadeX" src="web%20x%20icon%20white.png"></div>
<div id="job-content">
<h1 id="jobWords">Test</h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords">Test</h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords">Test</h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords">Test</h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords">Test</h1>
</div>
</div>
<div id="top-bar">
<a class="burger-nav"></a>
<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
</head>
</html>
Any help is appreciated,
Thank You
Take out overflow: hidden from
#nav-menu {
width: 50%;
height: 70%;
position: absolute;
z-index: 101;
word-wrap: break-word;
/* overflow: hidden; */
left: 15%;
top: 20%;
}