How to center the contents inside this container without sacrificing the width. I could decrease width and do margin: 0 auto but thats not what I want.
Currently the form doesn't look in the middle it looks aligned left. From the first character to the end of the image the form should appear to be at the center of the page that is what I am trying to do.
https://jsfiddle.net/yj4zh297/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Print Form</title>
<style type="text/css">
.line{
border-bottom: 1px solid black;
}
.clear {
clear: both;
}
.row {
margin: 0;
}
.container-fluid div {
margin-bottom: 3px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background: grey;">
<div class="col-sm-6 float-right">
<!--.img-fluid . max-width: 100%; and height: auto; are applied to the image so that it scales with the parent elemen-->
<figure style="max-width: 200px; max-height: 200px;">
<img src="https://i.imgur.com/rC8Btb0.jpg" class="img-fluid" alt="image">
</figure>
</div>
<div class="col-sm-6 float-left">
Form Number: <span class="line">21129012</span><br>
</div>
<div class="col-sm-12">
Hostel: <span class="line">(Yes / No)</span><br>
</div>
<div class="col-sm-12">
Course Applying For: <span class="line"> BSC Informatics and robotics</span><br>
</div>
<div class="col-sm-12">
Full Name (IN BLOCK LETTERS): <span class="line"> DLKLKDJ LKDJDKDJD</span><br>
</div>
<div class="col-sm-12">
Gender: <span class="line"> Male</span><br>
</div>
<div class="col-sm-12">
Phone Number: <span class="line"> 3838443322</span><br>
</div>
<div class="col-sm-12">
Email: <span class="line"> 3838443322</span><br>
</div>
</div> <!--end of container-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
You can set a width:100%; max-width: 800px; to the container-fluid.
And add margin-left:auto; margin-right:auto;
Related
i have used container class for the parent div
here:
<div class="container">
<main role="main" class="pb-3">
<div style="width:100%; height:300px;z-index:-1" class="col-lg-12 mt-n4 bg-white text-
center">
<div style="margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform:
translate(-50%,
-50%);transform: translate(-50%, -50%);">
<img class="rounded-circle border border-info p-1" style="width:150px;height:150px;"
src="~/ProfileImages/#currentuser.ImageProfile">
<h4 class="text-center font-weight-bold text-info">#Model.ApplicationUser.ArName</h4>
</div>
</div>
</main>
</div>
now: i want to make width for div inside the parent 100% but i could not with this code:
<div style="width:100%; height:300px;z-index:-1" class="col-lg-12 mt-n4 bg-white text-center">
<div style="margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%,
-50%);transform: translate(-50%, -50%);">
<img class="rounded-circle border border-info p-1" style="width:150px;height:150px;"
src="~/ProfileImages/#currentuser.ImageProfile">
<h4 class="text-center font-weight-bold text-info">#Model.ApplicationUser.ArName</h4>
</div>
</div>
how can i remove bootstrap "container" class effects on child element?
//Try this One, It works fine and responsive in all widths and no need to write that much css
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body style="width: auto;height: auto;">
<div class="container mt-2">
<div class="card bg-white text-
center" style="width:20rem">
<img class="img-fluid card-img-top"
src="https://cnet2.cbsistatic.com/img/-e95qclc6pwSnGE2YccC2oLDW_8=/1200x675/2020/04/16/7d6d8ed2-e10c-4f91-b2dd-74fae951c6d8/bazaart-edit-app.jpg">
<div class="card-body">
<h4 class="text-center font-weight-bold text-info">#Model.ApplicationUser.ArName</h4>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
I am developing my first .net core web application. I am trying to put my company logo in _layout.cshtml page, but it seems that the style sheet site.css is not recognized by the _layout page. Below is my code for _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"] - VitalRecords</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="headerDiv">
<div class="headerTopBanner"></div>
<div class="headerLogo">
<div class="logo"></div>
</div>
<h1 class="display-4">Welcome</h1>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - test - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
and my site.css has the following defined:
.headerDiv {
background-color: white;
}
.headerTopBanner {
background-color: $header-top-banner-color;
height: 5px;
width: 100%;
}
.headerLogo {
padding: 5px;
padding-left: 10px;
vertical-align: middle;
}
.logo {
background: url(../../images/LogoWithDesc) 0 0;
min-height: 70px;
vertical-align: middle;
}
$header-top-banner-color: #FD810A;
the screen shot of the output looks like so:
I have the similar code in Index.cshtml:
#page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
<div class="headerDiv">
<div class="headerTopBanner"></div>
<div class="headerLogo">
<div class="logo"></div>
</div>
<h1 class="display-4">Welcome</h1>
</div>
Thats is why the welcome is coming twice on my page, but logo and some other colors are not coming. It seems that site.css is not recognized at all.
any help will be highly appreciated,
Try importing your css link like this
<link href="#Url.Content("~/css/site.css")" rel="stylesheet" type="text/css" />
Have the following code with simple Bootstrap 4.0 grid.
Codepen
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
body {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
background-color: #005267;
min-height: 700px;
height: auto;
min-height: 100%;
overflow-y: scroll;
padding-bottom: 20px;
font-family: Arial, Geneva, Helvetica, sans-serif;
}
.vertical-align {
display: flex;
align-items: center;
}
.hr_news {
font-weight:bold;
}
/*2 kill*/
.header_bg {
background-color:red;
height:90px;
vertical-align: middle;
}
.brd_black {border:0px solid #000;}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Новости обучения и развития</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="brd_black align-self-center bg-white vertical-align col-2" style="height:90px;"><img src="http://igorisaev.com/logo.png" class="float-left">
</div>
<div class="brd_black col-2 bg-white"> </div>
<div class="brd_black col-8 bg-white vertical-align">
<h4>Новости обучения и развития</h4></div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
When I added hyperlink to image and start to resize page, empty col-2 cloumn steps over first column with image. If I remove hyperlink all works fine. Why this happens and how can i fix it?
below, you can find 3 scenarios:
as your code in the attached code-pen
if you remove the <a> from around your logo
if you use col-4
the 3rd option should work for you, if not, kindly share what you're looking for
.vertical-align {
display: flex;
align-items: center;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<br/>
<br/>
<br/>
<div class="row">
<div class="brd_black align-self-center bg-white vertical-align col-2" style="height:90px;">
<img src="https://www.akberiqbal.com/apple-touch-icon-144x144.png" class="float-left">
</div>
<div class="brd_black col-2 bg-white"> </div>
<div class="brd_black col-8 bg-white vertical-align">
<h4>THIS IS YOUR CODE</h4>
</div>
</div>
<br/>
<br/>
<br/>
<div class="row">
<div class="brd_black align-self-center bg-white vertical-align col-2" style="height:90px;">
<img src="https://www.akberiqbal.com/apple-touch-icon-144x144.png" class="float-left">
</div>
<div class="brd_black col-2 bg-white"> </div>
<div class="brd_black col-8 bg-white vertical-align">
<h4>this is when you remove <a> from around the logo</h4>
</div>
</div>
<br/>
<br/>
<br/>
<div class="row">
<div class="brd_black align-self-center bg-white vertical-align col-4" style="height:90px;">
<img src="https://www.akberiqbal.com/apple-touch-icon-144x144.png" class="float-left">
</div>
<div class="brd_black col-8 bg-white vertical-align">
<h4>this is when you have col-4 instead of empty col-2</h4>
</div>
</div>
</div>
I tried this code and try to add different display properties to header and div tags, but image in next div tag is coming top left corner. I want it to come in next line of header tag which is on right top(pull right).This is about position of div and header tags
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet"/>
<style type="text/css">
</style>
</head>
<body style="background-color: #1D1D1D" >
<div id="main" class="">
<header class="site header" role="banner">
<h1 id="logo" class="pull-right"> Logo of site
</h1>
</header>
<div id="">
<div id="" class="">
<img src="Images/1157217a.jpg?w=1800&fit=max&auto=compress,format&h=1800" width="240" height="312" alt="slideshow image">
</div>
</div>
</div>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/jquery.cycle2.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
</body>
</html>
you can add class="clearfix" after the header tag and then the image will come in the next line. Clearfix is a class in bootstrap
A display: block; using a css on one of this two element will be enought.
Indeed display: block tell a div to take all the width of the page.
<header class="site header" role="banner">
<h1 id="logo" class="pull-right"> Logo of site
</h1>
</header>
<div id="">
<div id="" class="" style="display:block;">
<img src="Images/1157217a.jpg?w=1800&fit=max&auto=compress,format&h=1800" width="240" height="312" alt="slideshow image">
</div>
</div>
Or simply use bootstrap structurales classes as "container", "row" to create a new section above the header ?
you can simply do with this float:left property, just check with this example
header {
float:left;
width:100%;
background: #c1c1c1; /* just for showing the header */
padding:15px;
}
.block-element {
float:left;
width:100%;
background: #ddd; /* just for showing the div */
padding:15px;
margin-top:30px;
}
<header>
<!-- something here -->
</header>
<div class="block-element">
<!-- something here -->
</div>
<div class="block-element">
<!-- something here -->
</div>
I feel like using margin and padding will mess with the bootstrap grid in a way that makes it not work on all devices since your going outside of the grid. If anyone can clarify this that would be awesome. Anyways I'm having issues getting the left arrow to space out away from the 3 bike images in a way that keeps everything on the page perfectly centered. I've been messing with the grid, but no matter what I do I can't get the left arrow to move away from the first bike image. See screenshot for reference. Any help is appreciated.
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div class="row">
<div class="col-md-1" id="leftArrow"><img ng-src="images/leftarrow.png"></div>
<div class="col-md-3 text-center" ng-repeat="product in products | limitTo:-3">
{{product.manufacturer}}
<img id="bikePic" ng-src="{{product.image}}">
</div>
<div class="col-md-1" id="rightArrow"><img ng-src="images/rightarrow.png"></div>
</div>
</div><!--End controller-->
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
</body>
</html>
CSS
.header{
font-style:italic;
background-color:black;
height:60px;
color:white;
font-weight:bold;
font-size:40px;
}
.header .fa {font-style:italic;
}
.bikeSelector{
color:green;
}
.chooseTitle{
font-size:60px;
}
.products{
color: #1E90FF ;
text-align:center;
font-size:40px;
}
#bikePic{
height:100%;
width:100%;
}
<img ng-src="images/leftarrow.png">
change to
<img ng-src="images/leftarrow.png" class="img-responsive">
this will add max-width: 100%; to your image and won't break the <div class="col-md-1" id="leftArrow"> layout
In other words, your problem is that nav images is too big :)
I would rather use absolute positioning for the navigation elements.
Like
#leftArrow{
position: absolute;
left: -40px;
top: 50%;
}