I have a heading tag with a secondary subtitle like this:
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Is there a way to apply the Bootstrap grid system with column spacings for these inline elements, so that for small screens, the subtitle is on a different line?
I could only think to split the h1 into two columns and apply column classes to control the layout:
<div class="row">
<div class="col-xs-12 col-md-4 col-lg-4">
<h1>Fancy display heading</h1>
</div>
<div class="col-xs-12 col-md-8 col-lg-8">
<h1><small class="text-muted">With faded secondary text</small></h1>
</div>
</div>
But there are now two heading tags and too much negative space between them.
The easiest Bootstrap solution is to forget even using columns for this. Using Bootstrap 4's display utilities set the small element to display block by default, and for larger than small screens display inline like:
<h3>
Fancy display heading
<small class="d-block d-md-inline text-muted">With faded secondary text</small>
</h3>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<h3>
Fancy display heading
<small class="d-block d-md-inline text-muted">With faded secondary text</small>
</h3>
You can specify this using Bootstrap's CSS utilities with breakpoints. Let's say you want different behavior on medium screen sizes and up. To clarify, you want the following behavior:
Medium and up:
The two headings should display inline with each other
Smaller than medium:
The two headings should be one on top of the other
This is what the code would look like:
<h1 class="d-md-inline-block">Fancy display heading</h1>
<h2 class="d-md-inline-block text-muted">With faded secondary text</h2>
The utility class here means that the elements will be displayed inline-block for medium screen sizes and up.
You can remove h1 and add necessary css rules, because the browser makes margin for h1 by default
HTML:
<div class="row">
<div class="col-xs-12 col-md-4 col-lg-4 headingTest">
Fancy display heading
</div>
<div class="col-xs-12 col-md-8 col-lg-8 headingTest">
<small class="text-muted">With faded secondary text</small>
</div>
</div>
CSS:
.headingTest {
font-size: 32px;
}
Related
I am using Bootstrap 4, and trying to align my columns so that I have 2 images next to each-other on medium or larger viewports, but they keep aligning themselves one on top of the other.
<div class="row">
<div class="col-6">
<img class="img-fluid"
src="img/1.PNG">
</div>
<div class="col col-5 d-none d-md-block">
<img class="img-fluid"
src="img/2.PNG">
</div>
</div>
Image of code and example
That should work just fine if you take all the extra bits from the Row classes and just have class="row" Your column widths are both set to 5 though, 6 would be ideal for centering.
To assist with sleeker code, on the img classes try removing it all except for img-fluid
Your column classes are wrong. col fills all available space, and col-5 takes 5 columns on all screens. And in this case your col-5 is overriding your col anyway. What you actually need to do:
Use col-md-6 on both the images in place of col col-5. Your images will align themselves side by side from medium and up.
Also, you do NOT need to add d-none d-md-block to the parent and all the child classes. If you don't want to show a particular div in less than md, using it on the parent is enough.
For demonstration purposes I went ahead and used a dummy image that I could get to work. Your structure should be as follows.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="row">
<div class="col-6 col-lg-6 col-sm-6">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col-6 col-lg-6 col-sm-6">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
Using the different Large, Medium, and Small bootstrap classes allows for your row to adjust on different screen sizes, while maintaining that row structure. This link here is also very helpful for learning the system.
<br>
<h6>
This row/deck contains two elements. You can see that even with col-md-4 it spans more than 2/3 of the width.
</h6>
<div class="flex-row">
<div class="card-deck">
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
</div>
</div> <br><br>
<h6>
This row/deck contains three elements. You can see that each card spaces 1/3 of the width as expected.
</h6>
<div class="flex-row">
<div class="card-deck">
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
</div>
</div>
</div>
https://jsfiddle.net/9e85Lb0y/
In this example there are two flex-rows each containing a card deck. The first deck has 2 cards and the second deck has 3 cards. All of the cards are identical. Why is it that the top row has wider cards? I would have expected the top row to have the same widths as the bottom row.
Columns aren't meant to be inside card-deck. They're only supposed to be contained in .row. The cards would go inside the columns.
From the Bootstrap docs...
"Rows are wrappers for columns... In a grid layout, content must be
placed within columns and only columns may be immediate children of
rows."
If you're trying to set widths for the cards in card-decks, see:
Bootstrap 4 card-deck with number of columns based on viewport, or
bootstrap 4 card-deck containing cards with different width
TLDR
Use flex-row and col-* to explicitly specify widths. Use card-deck and card to create evenly sized blocks. Avoid mixing the two, they are not designed for use together straight out of the box.
Long Answer
The issue here is most likely caused by the mixture of both the flex-row and card-deck classes. While both offer very similar functionality, there are some key differences which separate how they behave.
The card-deck class simply guarantees that any immediate elements with the card class are all the same width as one another.
<div class="card-deck">
<div class="card">
<!-- Content -->
</div>
<div class="card">
<!-- Content -->
</div>
<div class="card">
<!-- Content -->
</div>
</div>
Every <div class="card"></div> will now become a uniform width. They are not guaranteed to fill the whole of their parent container. The card class also applies left and right margins of 15px to keep them separated.
<div class="flex-row">
<div class="col-4">
<!-- 1/3 Width Column -->
</div>
<div class="col-4">
<!-- 1/3 Width Column -->
</div>
<div class="col-4">
<!-- 1/3 Width Column -->
</div>
</div>
The flex-row and col-* classes on the other hand allow you to create columns of specific size. Each col-* class simply applies a width to the element, the onus is on you to make sure your content will fit appropriately at each breakpoint. col's SHOULD NOT have any margins applied as CSS width declarations do not account for margins.
Hello friends I have a problem with bootstrap and the <p> tag. When I add some big text in the <p> tag, it doesn't adjust to the 6 column that I define, it stays continuous to the right of the page taking up all space.
How could I make the text within the <p> tag always take the first 6 colums?
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class='container'>
<div class='row'>
<div class='col-sm-6'>
<h2 class='text'>text</h2>
<hr>
<h4 class='text-warning'>Title</h4>
<p>text content</p>
</div>
Just add this as a custom style and it'll wrap at your defined column size.
p{
word-wrap: break-word;
}
Check it out here.
First of all make sure you close all your <div> tags.
And then make sure you are displaying the device you need. The class col-sm-6 is for tabelt view. If you want 6 columns on every device add these classes aswell: col-lg-6 col-md-6 col-xs-6.
Due to the fact that bootstrap is mobile-first it would be enough to add only the rule col-xs-6, so it will have 6 columns on every device.
To learn more about the grid and the breakpoints visit:
Bootstrap CSS and scroll to Grid options
I'm trying to reorder the columns on my website via Bootstrap's method of reordering columns depending on the screen size which works fine for most of the responsive layouts I'm testing apart from 1.
The layout having problems is the Tablet Landscape Layout (1024 x 768) which displays like this:
Every other screen displays the blue div and the right div either with the red div on top if the screen is too small or on the right with the blue div aligning itself exactly next to it if the screen is large enough.
This is the code I'm using right now:
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row clearfix">
<div class="col-xs-12 col-sm-12 col-md-push-8 col-md-4 col-lg-push-8 col-lg-4 col-xl-push-8 col-xl-4" style="background: red">
Basket
</div>
<div class="col-xs-12 col-sm-12 col-md-pull-8 col-md-8 col-lg-pull-4 col-lg-8 col-xl-pull-8 col-xl-8" style="background: blue">
News
</div>
</div>
</div>
</div>
Does anyone know why the blue div is so far to the right on the Tablet Landscape layout rather than touching the red div like it should?
Some general markup issues:
First of all, there's no col-xl-*, so you can get rid of those.
Secondly, you don't need col-xs-12, since the default is for it take up the whole width unless otherwise specified.
Third, Bootstrap is mobile first, so larger sizes will override the existing smaller sizes, meaning if you don't intend on changing something, there's no need to specify the larger size again.
The actual issue is that col-*-pull-* is relative to where the element would be placed. Bear in mind, you haven't changed anything in the document flow. So the elements are positioned normally and then phase shifted with left or right. Since the blue container would normally start 4 columns over, you only need to pull it back by 4 columns, instead of 8.
The whole thing can be rewritten like this:
.red { background: red }
.blue { background: blue }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-4 col-md-push-8 red"> Basket </div>
<div class="col-md-8 col-md-pull-4 blue"> News </div>
</div>
</div>
If my page uses the Bootstrap class row, col-md-x and such to arrange the content, what would be the proper way to create a distance between each div containing a whole element semantically speaking?
I am adding a div with a padding between the divs to simulate the gap, is this a good tactic or is there a better one?
Starting from Bootstrap v4 you can simply add the following to your div class attribute: mt-2 (margin top 2)
<div class="mt-2 col-md-12">
This will have a two-point top margin!
</div>
More examples are given in the docs: Bootstrap v4 docs
Adding a padding between the divs to simulate a gap might be a hack, but why not use something Bootstrap provides. It's called offsets. But again, you can define a class in your custom.css (you shouldn't edit the core stylesheet anyway) file and add something like .gap. However, .col-md-offset-* does the job most of the times for me, allowing me to precisely leave a gap between the divs.
As for vertical spacing, unfortunately, there isn't anything set built-in like that in Bootstrap 3, so you will have to invent your own custom class to do that. I'd usually do something like .top-buffer { margin-top:20px; }. This does the trick, and obviously, it doesn't have to be 20px, it can be anything you like.
I required only one instance of the vertical padding, so I inserted this line in the appropriate place to avoid adding more to the css. <div style="margin-top:5px"></div>
The easiest way to do it is to add mb-5 to your classes. That is <div class='row mb-5'>.
NOTE:
mb varies betweeen 1 to 5
The Div MUST have the row class
An alternative way to accomplish what you are asking, without having problems on the mobile version of your website, (Remember that the margin attribute will brake your responsive layout on mobile version thus you have to add on your element a supplementary attribute like #media (min-width:768px){ 'your-class'{margin:0}} to override the previous margin)
is to nest your class in your preferred div and then add on your class
the margin option you want
like the following example:
HTML
<div class="container">
<div class="col-md-3 col-xs-12">
<div class="events">
<img src="..." class="img-responsive" alt="...."/>
<div class="figcaption">
<h2>Event Title</h2>
<p>Event Description.</p>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="events">
<img src="..." class="img-responsive" alt="...."/>
<div class="figcaption">
<h2>Event Title</h2>
<p>Event Description. </p>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="events">
<img src="..." class="img-responsive" alt="...."/>
<div class="figcaption">
<h2>Event Title</h2>
<p>Event Description. </p>
</div>
</div>
</div>
</div>
And on your CSS you just add the margin option on your class which in this example is "events" like:
.events{
margin: 20px 10px;
}
By this method you will have all the wanted space between your divs making sure you do not brake anything on your website's mobile and tablet versions.