I would like to add a margin on the left-hand side on my html page. I am using Twitter Bootstrap.
Inside my html header, I have these lines;
<script src="misc/ui-bootstrap-tpls-0.11.0.min.js"></script>
<link href="misc/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="owncss/own.css" rel="stylesheet">
Inside own.css, I have these lines;
body {
width: auto;
margin-left: 20px;
margin-right: auto;
}
Unfortunately, on the webpage, there is zero margin. What did I do wrong?
Sathish is correct, make sure your stylesheet is linked.
Bootply to verify that your style, when linked correctly, will set a margin of 20px:
http://www.bootply.com/DC0e2nPVPL
Related
I am trying to add a nice background color to a website page. This should be straightforward using background-color in my CSS file, but it won't show. So far, I have played around with my HTML code and found out that when I remove a link to a bootstrap 4 CSS file in my header, it displays perfectly. However, I need to keep bootstrap 4, so I tried other fixes:
body {
height:100%;
padding:0%;
margin-top: 50px;
background-image: none;
background-color:#B59DA4;}
The background-image: none, height:100%, or the padding:0% weren't effective compared to removing the bootstrap 4 link:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Any guidance at all would be greatly appreciated solving this issue without removing bootstrap 4.
By default, Bootstrap uses a white background. You will need to use the !important flag to override it.
body {
height:100%;
padding:0%;
margin-top: 50px;
background-image: none;
background-color:#B59DA4 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>hi</body>
I have seemed to encounter an unknown space below the div pair.
I have used the bootstrap grid concept and made use of rows and columns to have 2 adjacent Divs.
Then I have used CSS to make the div fill the whole space of the screen but I seem to get unaccounted for white space below the divs.
I have already tried including an advanced CSS reset.
Here is the html :
#half_box_1 {
width: 50%;
height: 100vh;
background-color: #FFAEAB;
}
#half_box_2 {
width: 50%;
height: 100vh;
background-color: #FFC0FA;
}
#following_div {
height: 500px;
width: 100%;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Kshitij Dhyani</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="materialize.css">
<link rel="stylesheet" type="text/css" href="my_portfolio.css">
<!-- FONTS -->
</head>
<body>
<div class="row">
<div class="col-lg-6" id="half_box_1">asd</div>
<div class="col-lg-6"
id="half_box_2"></div>
</div>
<div id="following_div"></div>
</body>
</html>
I am unable to comprehend this unaccounted space.
Since you probably have noticed (by the comments), your code seems to work fine.
Your problem seems to be somewhere else in your CSS.
First, try to use the following CSS to see if it works:
* {
padding: 0 !important;
margin: 0 !important;
}
If that worked, you can delete it and you need to start debugging.
Open up Chrome DevTools and go to Sources -> Page and find your CSS file(s). Try to delete each CSS block one after the other. If there is no more space between, you may found out where the problem is.
this is default margin, Please add this code body{margin: 0;padding: 0;} in css
I am having some issues with using Bootstrap for the first time. For some reason no matter what changes I make to my custom css it does not affect the bootstrap css or the regular html of the layout. I am currently trying to build my first website in visual studio and have been advised to work with bootstrap however I cannot seem to get it to work the way I want it to. I have successfully created web elements that I want without the use of bootstrap however when I try to use bootstrap it just does not want to display any of my custom css no matter what I do.
As I stated above, the first thing I tried was editing the bootstrap css directly, which had absolutely no effect on the layout of my webpages. After this, I discovered it was a good idea to create a seperate main.css file and then link it in to bootstrap file, with any changes being made to the main.css file should change the bootstrap css without having to mess up the bootstrap file. However, using this method none of the changes alter the way the webpages are displayed in any way. After this, I decided to follow this tutorial https://websitesetup.org/bootstrap-tutorial-for-beginners/ step by step, even though it is a notepad++ tutorial and not a visual studio tutorial. Even following this tutorial step by step none of the changes made to the css are displayed on the webpage.
When I simply add the html I want to the layout page without linking the bootstrap or main.css to the layout page the features work as intended, but I cannot customize some things with html so I need to get it working with css.
I have done a few google searches for solutions to this issue and tried several, such as moving code from the body of the layout page to the footer, ensuring the file directory for the .css files is correct, including capital letters, but I cannot seem to find where the issue is.
This is how I linked my layout page to the main.css file which contains the css for altering the nav bar of my webpages:
<head>
<link rel="stylesheet" type="text/css" href="Main.css">
this is the link to the Main.css file with my custom .css that I used in the layout view in visual studio
<link rel="stylesheet" href="BSProject/css/bootstrap.min.css">
This is the link to the bootstrap file I used when following the above tutorial and added this to the head of the index.html file
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
This is the stuff I put in my main.css file, while also finding the .nav classes in the bootstrap.css and trying to put this information in the bootstrap file also.
/* The navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 30px; /* Add a top margin to avoid content overlay */
}
I am trying to change the colour of the nav bar, the colour of the text, the colour of the text on scroll over, the colour of the text on the nav bar of the page that is currently being viewed, the text type/size/position and I want the nav bar to be fixed at the top of the page so that as you scroll down the page you can still see the nav bar at the top of the window. And I want the nav bar to scale with the size of the window for mobile users, a feature that is included in bootstrap. I understand everything I mentioned is not present in the above css, this is because I wanted to test it was functional before I began typing out all the css I need.
I can already do all of this without using bootstrap but for this project I am required to use it and I just can't seem to display anything other than the default bootstrap nav bar no matter what I change in the css.
First of all move your style Link after Viewport and also move your custom css file Main.css after Bootstrap.min.css. Try this I hope it'll resolve your issue. Thanks
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- StyleSheet -->
<link rel="stylesheet" href="BSProject/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
I am currently using WKHTMLTOPDF to generate PDFs through my Laravel application. The PDF template uses Bootstrap 3.3.6.
What I'm currently seeing is that the text, font, layout renders perfectly, but text is cut off from the left-margin.
If I remove the call for the Bootstrap CSS, it doesn't cut off the text, but the tables etc.. aren't aligned/laid out correctly. It must be something in Bootstrap that's causing this issue.
Top of template
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
width: auto !important; min-width: 100% !important;
font-family: 'Lato';
}
.page-break {
page-break-after: always;
}
</style>
The line width: auto !important; min-width: 100% !important; makes more of the text visible, but it's still not perfect (see screenshot below on the second page):
Any text wrapped in<p> </p> fits on the PDF correctly, but the headers and tables etc.. are cut off on the left hand side.
Controller code:
$pdf = PDF::loadView('reports.view-full-audit-report', $data)
->setPaper('a4')
->setOrientation('portrait')
->setOption('encoding', 'utf-8');
return $pdf->download('auditReport.pdf');
Has anyone experienced this before? If so, how did you resolve it? If you require further code samples, please let me know. Many thanks.
I have experienced this before, on Frappé Framweork and ERPNext. The HTML rendering for a DocType (Sales Invoice) will do this for mysterious reasons. So far I have found two workarounds:
1. Set the viewport size in the HTML code as per your final document size. For example, an 8.5 x 11 Letter sized page would be:
<style>
#media screen {
.print-format {
width: 21.59cm;
min-height: 27.94cm;
padding: 0.0cm;
}
}
</style>
I think you can use inches or other accepted measurements as well. You must declare an adequate viewport size on the HTML or Jinja template by doing the above solution
If all else fails, I solved my problem alternatively with the following styles and HTML:
<style>
div.general{
position: relative;
top: 0.0cm;
/*left: 0.0cm; */
}
div.document_size{
position: absolute;
width: 21.59cm;
height: 27.94cm;
}
</style>
<div class="general">
<div class="document_size">
<!-- YOUR HTML GOES HERE -->
</div>
</div>
Finally, to carefully position your elements on the page, use the span tag, with a declared class style, so you can place it in absolute terms within the divs created above. Distances are measured from the top left (origin) of the document:
span.item1{
position: absolute;
top: 1cm;
left: 1cm;
}
Once you have placed the span class= "item1" within the div tags as above, you can place anything you want within them. I consider these span tags as a sort of coordinate system marker, that ensures consistent output on every generation of wkhtmltopdf.
I would like to know if there is a way to use a particular css page as styling for a tag.
For example, instead of
<div class="header" style="position: absolute; text-align:left; right: auto; margin: 0 auto 20px; z-index: 1; width: 60%; height: auto; left:9%">
Is there a way to specify style.css for the div tag?
For example,
This style.css must ONLY apply to the div tag above.
Also, is it possible for all tags contained within that div tag to follow the same specified css page?
Put this in the header of your page
<head>
<link rel="stylesheet" href="/styles.css" type="text/css">
</head>
If you want to specify style for a page, include that CSS when you render the page.
If you want to have multiple ways of rendering a particular tag, differentiate the tags.
I'm not aware of conditional logic you can apply to the CSS directly.
HTML:
(include this in the head)
<link href='style.css' rel='stylesheet' type='text/css'/>
CSS: (in the style.css file)
div.header{
//your style here
}
or without the class:
div{
//your style here
}
but without the class it will get all div tags so I recommend the first code
You can create the CSS page you want and then create the styling you want inside
something like this
div > table {
padding: 5px;
}
That would make the div have a padding of five as well as it's child the table a padding of 5