I am currently working on a landing page that uses bootstrap's grid system for positioning and the desktop view has the layout looking something like:
|h1|--------------------|p|
|Button|
The mobile view has it looking like:
|h1|
|p|
|button|
Because of the grid, the h1 and button are in 1 div and the P is in it's own div.
The easy solution would be to just have hidden divs based on the breakpoints, but I'm trying to avoid this. I've tried using the order class to move things around with other elements on the page, but seeing as the parent s are the 2 objects in the grid and not their children, this doesn't work. I could also do this with JS, but I would also like to avoid doing this.
<section class="test">
<div class="container">
<div class="test--content row justify-content-lg-center text-lg-left">
<div class="test--cta col-12 col-lg-5">
<h1>Headline</h1>
<div class="button main">CTA</div>
</div>
<div class="contact--text col-12 col-lg-5">
<p>Content</p>
</div>
</div>
</div>
</section>
As I mentioned, the solution with CSS and JS are pretty clear, but as I've barely used Bootstrap, I am curious to know if this is possible without using the above mentioned solutions or if there was a way to do this with Bootstrap.
Related
I'm stumbling uppon this problem every now and then since I started doing more frontend work. I'm using bootstrap as my frontend framework and want to do a simple 2 column layout. Each column has a title and an image.
Now my problem is that, if a title of one column spreads over multiple lines, the starting height of the image is not aligned along both columns.
Example:
the markup is just the basic bootstrap layout:
<div class='row'>
<div class='col-6'>
<h4>title</h4>
<img src='...'>
</div
<div class='col-6'>
<h4>some other long title over two lines</h4>
<img src='...'>
</div
</div>
I know how I could set the title heights with js to be the same for all titles but that does not seem to be a very nice solution to the problem. Is there a simple css trick to achieve this?
I was wondering what would be the best practice of using the "col" classes in Bootstrap.
example 1 - I already know this way is valid
<div class="row">
<div class="col-12">
<h1> Heading</h1>
</div>
</div>
example 2 - would this be considered a good practice as well?
<div class="row">
<h1 class="col-12"> Heading</h1>
</div>
Thanks for your answers!
The Grid System documentation includes only examples with div elements, and although the CSS styling applied by Bootstrap is not limited by any tag but only by classes (e.g. .col-md-6 instead of div.col-md-6) it is a better approach to nest your content in a div, for at least two reasons:
It will allow you to add other content later to the same column, such as a button or tooltip after the heading
Allows better styling of your h1 tag, and does not apply the automatic gutter of 15px on each side of it, which can make your heading alignment incoherent
Having said that, there may be more complex cases where your second approach would benefit, but in this case it does not seem applicable.
you can use the grid with other elements too as it is classes , but try to follow standards of coding and styling for proper code management and readability.
according to which example 1 is correct way
<div class="row">
<div class="col-12">
<h1> Heading</h1>
</div>
</div>
I'm studying web development for a few months now and I generally have some problems with the front-end and the UI layout. I often have difficulties placing the elements exactly where I want them. In that case, either I use relative values and break the responsiveness of the site, or I write some rules that seem to me like hacks.
For the example, let's consider this image:
As you can see, there is a Bootstrap container, full-width background color, two classic elements inside the container and an image outside.
For this kind of layout, I'd do something like the following:
<!-- /* MAIN WRAPPER -->
<div class="pull-right">
<img src="/img/topright_image.PNG" alt="shape">
</div>
<div class="bg-red"> <!-- Red background color. -->
<div class="container">
<header class="row">
<div class="hidden-sm hidden-xs col-sm-2" id="logo"> <!-- I'm using Bootstrap 3, IIRC there's a better way to do that in Bootstrap 4. -->
<img src="/img/logo.PNG" alt="logo">
</div>
<div class="col-sm-6 col-sm-push-3" id="title"> <!-- First difficulty, how to make sure the title will always be centered without being relative to the logo and no matter its content? -->
<h1>Centered title</h1>
</div>
</header>
</div>
</div>
<div class="bg-green"> <!-- Multiple containers, just to have colored backgrounds at 100% width of the page. -->
<div class="container">
<section></section>
</div>
</div>
<!-- MAIN WRAPPER */ -->
It's a quick draft, but you get the idea. The CSS will then implement arbitrary height for the header and the section (300px and 400px), then the max-width for the container.
How to do that properly?
(And what if I want to make the logo a little above the title; between two rows?)
"Proper" is relative. Which makes this a tough question to answer. Using only TBS, this solution is how I would do it. However, I tend to favor flexbox more than TBS so I'd probably use the TBS container how you have it set up (yes, doing that to the containers is a valid way of achieving your goal. Another method I have used before, is box-shadows. Neither option is better, but now you know), and then handle each row as a flexbox or even just simply use floats and centering. This is not a very heavy layout.
If you are looking to learn how to do it "properly", I'd read other code. Specifically for TBS I'd recommend Start Bootstrap. It has a bunch of TBS themes you can look at. Look at the code, see how they do it, see what you like, start doing that.
Ultimately, in the end, it doesn't matter how you get there[1] it just matters that you do. This is a viable solution, and I don't see anything glaringly wrong or hackish.
It actually does matter. But you appear to still be in the learning
phase[2] so it doesn't matter as much so long as you are willing to
keep an open mind and correct things as they are found
We are all always learning.
I am trying to change the order of my sidebar and content areas on my page.
<div class="col-md-3">Sidebar</div>
<div class="col-md-9">Content</div>
I've a hefty amount of content in my sidebar and I would like the sidebar to show under the content area on mobile instead of content under sidebar.
I've searched a few questions and I cannot seem to get the solutions to this.
You can use the col-md-pull-* and col-md-push-* classes. You want to set the mobile order in your HTML directly, then use these classes to rearrange them for desktop, ie:
<div class="col-md-9">Content</div>
<div class="col-md-3 col-md-3-pull">Sidebar</div>
whit that code should be work, but add those clases
<div class="col-md-3 col-sm-12">Sidebar</div>
<div class="col-md-9 col-sm-12">Content</div>
I am trying to put a detail view between rows in my web application.
I am using Bootstrap and some Frontend Rendering.
My code looks somewhat like this:
<div class="col-sm-4 col-xs-6">
...
</div>
<div class="col-sm-4 col-xs-6">
...
</div>
etc...
I am basically looking for some way to do this in bootstrap or some library that does it. The closest example I could find is in the newest itunes version, I've attached a screenshot for that.
Edit:
What I have tried / thought of:
Put the detail view as an absolutely positioned div inside the tile and give the tile a margin-bottom.
This didn't work out since the layout simply breaks. To make this work, you would have to give all elements in the row a margin-bottom.
Put a set of tiles into a row-div and just insert the detail div after that specific row.
This will either break every responsive feature or require a lot of javascript to somehow dynamically put the divs into rows.
I am basically looking for a library / css hack that makes me able to do this without writing a whole lot of javascript.
For the 'details' row, you'd probable just need to use:
<div class="col-xs-12">
...
</div>
That would force it to span the full width regardless of the screen size. So your 3 rows would look like:
<div class="col-sm-4 col-xs-6">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-sm-4 col-xs-6">
...
</div>