I am using dompdf to render a PDF document. We use Bootstrap 4 on the whole application, so I would like to be able to use it in the twig template used to generate our document.
Currently, I'm facing a problem with Bootstrap 4 grid system not rendering well in the generated PDF: the element in a same .row div all pile up.
I'm sure the Bootstrap CSS is loaded in the template.
My code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-1">
little text
</div>
<div class="col-xs-11">
<h1>Big title</h1>
</div>
</div>
</div>
The generated PDF:
Update: with col-n instead of col-xs-n
My code:
<div class="container-fluid">
<div class="row">
<div class="col-1">
little text
</div>
<div class="col-11">
<h1>Big title</h1>
</div>
</div>
</div>
try this class .col-1 and .col-11, or .col-sm-1 .col-sm-11
avaible:
.col- .col-sm- .col-md- .col-lg- .col-xl-
col-xs it's for bootstrap 3
I had the same problem.
Than I found this issues related at: https://github.com/barryvdh/laravel-dompdf/issues/653
One tip tha I tried was changing the class col- to col-xs- than the layout is better now. Not perfect as in browser but better than before.
I'm using bootstrap v4.4.1.
Pdf after change:
Related
This question already has answers here:
Responsive web design is working on desktop but not on mobile device
(4 answers)
Closed 5 years ago.
Good day,
I have a little gallery section on a web page where I make use of a css grid. it works perfectly fine on a normal web browser and when i scale it down i have managed to have it adjust as i wish using Media Queries (one image after the other), To my disappointment this didn't work when viewing on a mobile devise.
This is my first web site i have created so i expected issues. but I am now stuck on this one.
I need the images to arrange themselves below each other on a mobile browser. How would I go about this? see below html & css, the webpage is redneckrebellion.co.za if you want to see what I'm talking about or see https://codepen.io/underlight/pen/eyYLBa.
<content class="main-body">
<div class="main-content">
<div class="portfolio">
<div class="portfolio-item medium-one">
<div class="description">
<h1 class="text">Coffee Table</h1>
<p class="text">Custom Union Jack Coffee Table</p>
</div>
</div>
<div class="portfolio-item medium-two">
<div class="description">
<h1 class="text">Laser Cut Logo</h1>
<p class="text">Redneck Rebellion Laser Cut Logo</p>
</div>
</div>
<div class="portfolio-item wide-one">
<div class="description">
<h1 class="text">Custom Desk</h1>
<p class="text">Custom Desk Built To Clients Design</p>
</div>
</div>
<div class="portfolio-item tall">
<div class="description">
<h1 class="text">Container Cupboard</h1>
<p class="text">Custom Cupboard Built For Lillimex</p>
</div>
</div>
<div class="portfolio-item wide-two">
<div class="description">
<h1 class="text">Custom Shelf</h1>
<p class="text">Custom Shelf Built For Kids Car Themed Bedroom</p>
</div>
</div>
</div>
</div>
thanks!
There are many ways of doing this, and, based on your question, I'm assuming that these divs are being displayed horizontally already? Which means that they are using the display property of inline or inline-block, or, using float already. If you want to have something that will be re-usable (like Bootstrap framework), you can do something like this:
#media screen and (max-width: 480px) {
.medium-one, .medium-two .wide-one .tall .wide-two {
display:block;
}
}
Also, I would highly recommend using a library that is already made for something like this, such as Bootstrap
The simplest way is to surround your .portfolio-item with a media query like this:
#media(min-width: 500px) {
.portfolio-item {
margin: 10px;
box-shadow: 1;
display: flex;
justify-content: center;
align-items: center;
border: 5px solid white;
border-radius: 3%;
}
}
The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.
<!-- .container is main centered wrapper -->
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<!-- just use a number and class 'column' or 'columns' -->
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
enter code here
<!-- there are a few shorthand columns widths as well -->
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>
<!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) -->
I am trying to have a centered main content div along with a right sidebar using Bootstrap 3.0.
I have tried the following code to achieve this.
BootPly
But when i resize the browser to shorter width, the sidebar gets pushed down and also the main content get wider. Is this behavior expected of bootstrap ? Do i need to add col-xs* to accommodate the shorter width ?
I am wondering if this is the correct way to achieve this design ?
Thanks !
Yes, it is default behaviour. Bootstrap 3 was built with "mobile first" in mind, so the layout is responsive by default. You can achieve this effect by writing a custom grid and not using the Bootstrap column classes, like col-sm-6 and so on.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content">
Main Content
</div>
<div class="sidebar">
Side bar
</div>
</div>
</div>
</div>
Then write some css. This is just an example, and you should customise to fit your own needs.
.sidebar { width: 33.3%; }
.content { width: 66.6%; }
You can fit two columns on the smallest screen size, but it's unlikely that this is what you are after. On small screens there's very little space for any substantial content to fit into two columns.
<div class="col-xs-6">
Main Content
</div>
<div class="col-xs-6">
Side bar
</div>
You are indeed correct that this is a feature of bootstrap :) You're also correct on using .col-xs-* to achieve your planned design. To add to what you're trying to do, (just in case you haven't tried this already) you can also combine the grid classes in order to accommodate the different screen sizes.
Here's an example:
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
Goodluck! :)
I have a struggle with bootstrap framework.
I want to create a simple box with image on the left side and some text and other elements on the right side. But having issue when it is displayed on small screens.
This is my current code.
<div class="col-md-8" style="margin-top: 3px;">
<div class="feed-box">
<div class="row">
<div class="col-md-1">
<img style="max-width: 52px;" src="http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=250">
</div>
<div class="col-md-11">
<div class="row">
<p>John Doe announced something</p>
</div>
<div class="row">
<p>
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
</p>
</div>
<div class="row">
Comment
Share
</div>
</div>
</div>
</div>
</div>
I will explain it through images:
Desktop (it's fine this padding is not important here):
Small screen (bad):
What I am trying to make (in small screens):
You need to also specify the cols for smaller screens...i.e - you don't need to put in for md
<div class = "row">
<div class = "col-sm-1">
</div>
<div class = "col-sm-11">
</div>
</div>
Use media queries to style the elements for small screen.
For example check this fiddle(resize to see the difference)
CSS used
#media (max-width: 800px){
.feed-box .col-md-1{
float:left;
margin-bottom:8px;
}
.feed-box .col-md-11{
margin-top:15px;
}
}
What is the best practice for implementing the bootstrap 3 grid? There are two options, via classes in html and via less mixins.
Using bootstrap classes in html and bootstrap.css (which seems to be the standard):
<div class="container">
<div class="row">
<div class="column-md-6 column-xs-8">
<p>test</p>
</div>
<div class="column-md-6 column-xs-4">
<div class="row">
<div class="column-md-8 column-xs-6">
<p>Another test</p>
</div>
<div class="column-md-4 column-xs-6">
<p>Yet another test</p>
</div>
</div>
</div>
</div>
</div>
Using LESS and bootstrap mixins and appropriate html structure:
<div id="maincontent">
<div id="maincontentarea">
<div id="blogarticles">
<p>test</p>
</div>
<div id="whatsnew">
<div id="whatsnewarea">
<div id="whatsnewheading">
<p>Another test</p>
<div>
<div id="whatsnewlist">
<p>Yet another test</p></div>
<div>
</div>
</div>
</div>
<div>
and the corresponding LESS:
#maincontent{
.container();
#maincontentarea{
.make-row();
#blogarticles{
.make-md-column(6);
.make-xs-column(8);
}
#whatsnew{
.make-md-column(6);
.make-xs-column(4);
#whatsnewarea{
.make-row();
#whatsnewheading{
.make-md-column(8);
}
#whatsnewlist{
.make-xs-column(6);
}
}
}
}
}
It sounds like a nice idea to have a .LESS file simply using the bootstrap mixins to define the structure, but is that not essentially duplicating the element structure in the less file which is already defined in LESS. Which one is more maintainable?
Personally i think using Bootstrap's class will give you a maintainable structure. Otherwise you could prefer a more semantic solution. Note your appropriate html structure don't have added value in my opinion and is not semantic.
Using and implementing Bootstrap in a more semantic way won't be always easy:
Example of problem with the grid to have to solve: How can I create multiple rows using semantic markup in Bootstrap 3?. Also Twitter's Bootstrap 3.x semantic mobile grid and especially pay attention to the answer of #Gravy (https://stackoverflow.com/a/18667955/1596547).
Also interesting : How to use sass to properly avoid embedding twitter bootstrap class names on HTML
I am designing a website using the responsive Bootstrap framework.
I have 3 content areas next each other (horizontally). If I have a small display, these 2 contents are under each other (typical responsive design).
Now I want to add a <hr/> after each content block that is under each other.
<div class="row-fluid content">
<div class="span4">test1</div>
<div class="span4">test2</div>
<div class="span4">test3</div>
</div>
This is the whole code for a big display.
On some displays there are 2 blocks horizontal and 1 block under the 2 blocks.
Then I want to insert a <hr/> between the 2 lines.
Bootstrap provides classes to manage the visibility of any element by device, based on media queries. You have to place <hr/> elements wich are only visible in specific viewports:
<div class="row-fluid content">
<div class="span4">test1</div>
<hr class="visible-phone"/>
<div class="span4">test2</div>
<hr class="visible-phone"/>
<div class="span4">test3</div>
</div>
Check the documentation for more Responsive utility classes.