Just started using Blueprint CSS and now playing with the grids but have a simple problem. I created a navbar at the top of my page with each link 2 columns wide (using span-2). What is the right way to center these links inside the grid columns without hacking away at the css.
<div id="navbar" class="container showgrid">
<div class="span-2 border">
News
</div>
<div class="span-2 border">
Gigs
</div>
<div class="span-2 border">
Tunes
</div>
<div class="span-2 border">
Email List
</div>
</div>
I would create a helper class like this:
css:
.text-center{ text-align:center; }
html:
<div class="span-2 border text-center">
News
</div>
<div class="span-2 border text-center">
Gigs
</div>
Related
So I've tried a few of the solutions provided here (and elsewhere on the web) to see if I could break out of the bootstrap container, but I'm not having any luck. To describe it, I have a .fluid-container to put a full-width background behind a normal .container. Where things get tricky is that I need the first column in .container to break out and extend all the way to the left edge of the screen.
What it should look like:
What I've gotten it to do:
Here's my HTML:
<div class="container-fluid bg-darkblue bg-image-footer py-5">
<div class="container">
<div class="row" id="footer-content">
<div class="col-5 px-0 py-3 bg-limegreen">
Form content goes here.
</div>
<div class="col-1"> </div>
<div class="col-2 text-white">
<p class="avenir text-limegreen text-upper">Contact Us</p>
<p>(202) 555-1212</p>
<p>email#email.com</p>
<p>New York, NY</p>
</div>
<div class="col-2">
<p class="avenir text-limegreen text-upper">Client Name</p>
<p>About</p>
<p>Careers</p>
<p>Accessibility</p>
</div>
<div class="col-2">
<p class="avenir text-limegreen text-upper">Social</p>
</div>
</div>
</div>
</div>
To reiterate -- the goal here is to move the left edge of the lime green box all the way to the left edge of the screen, without moving the right edge out of the grid system or screwing with the rest of the layout.
All CSS is straightforward Bootstrap 5, with the exception of a few things to control color like .bg-limegreen.
Bootstrap layouts should never have immediately-nested containers. Instead, use standard row/column nesting. Avoid trying to "break out" of anything unless you actually need overlap across columns. That's rarely the case.
Also note that I replaced some of your custom classes with existing Bootstrap classes (text-light and text-uppercase). You'd be wise to get to know what Bootstrap offers very well to avoid building redundant CSS technical debt. See Bootstrap's text utilities.
I'd also encourage you to override Bootstrap's semantically-named classes for color rather than creating new, non-semantic ones. For example, text-limegreen might instead be an override of text-success, even if just for the footer. Have a look at Bootstrap's color utilities.
.bg-darkblue {
background: darkblue;
}
.bg-limegreen {
background: limegreen;
}
.text-limegreen {
color: limegreen;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid bg-darkblue bg-image-footer py-5">
<div class="row" id="footer-content">
<div class="col-5 px-0 py-3 bg-limegreen">
<div class="row justify-content-end">
<div class="col-8 text-light">
Form content goes here.
</div>
</div>
</div>
<div class="col-1"></div>
<div class="col-6">
<div class="row justify-content-start text-light pt-2">
<div class="col-3">
<p class="avenir text-limegreen text-uppercase">Contact Us</p>
<p>(202) 555-1212</p>
<p>email#email.com</p>
<p>New York, NY</p>
</div>
<div class="col-3">
<p class="avenir text-limegreen text-uppercase">Client Name</p>
<p>About</p>
<p>Careers</p>
<p>Accessibility</p>
</div>
<div class="col-3">
<p class="avenir text-limegreen text-uppercase">Social</p>
</div>
</div>
</div>
</div>
How do I get my svg to float:right; and float:left; in the following codepen? I am using the float-right and float-left Bootstrap 4 utility classes. But it doesn't work on my <div> elements. I'm using D3.js to create two bar charts and place them side by side.
Thank you.
<div class="container">
<div class="row">
<div class="col-6" id="barchart"></div>
<div class="col-6 float-right" id="barchart2"></div>
</div>
<div class="row">
<div class="col-8"></div>
<div class="col-4"></div>
</div>
</div>
Instead of using float I used something similar to what Paulie_D suggested.
d-flex justify-content-end
You have added the float-right class to the parent element which is already applied the entire col-6.
You need to create a child div and apply the float-right and add your ids for the bar chart.
<div class="container">
<div class="row">
<div class="col-6">
<div class="float-left" id="barchart"></div>
</div>
<div class="col-6">
<div class="float-right" id="barchart2"></div>
</div>
</div>
</div>
I'm trying to align some content in Bootstrap 4. It's not working the way I think and I don't understand why. Specifically, I'm unable to vertically or horizontally align content in a column. For example, in this Bootply, I have the following:
<div class="container">
<div class="row">
<div class="col-8">
<h2 class="display-4">Some Text</h2>
<p class="lead">
Some other details go here. This portion can go up to three lines of text. It will wrap around to the next line. A YouTube video will be available in the right side.
It's not there because Bootply doesn't allow iframes.
</p>
</div>
<div class="col-4">
<div style="border:solid 2px #ddd;">
A vertically centered YouTube video.
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-3">
<div class="fa fa-arrow-right" style="font-size:3.0rem;"></div>
</div>
<div class="col-9">
<h3 class="card-title">Detail</h3>
<p class="card-text">Here's some more info for you. This could go up to three lines of text. How do I center the arrow?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How do I vertically align the YouTube video so that it's centered? How do I vertically align the arrow so that it's centered? I can't seem to even get the arrow to center horizontally. I tried using justify-content-center as mentioned here without any luck. What am I doing wrong?
You need to use nested flexbox
.col-3 {
display:flex;
align-items:center;
justify-content:center;
}
Bootply
I have a screen split in two, using two columns.
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>
I need a small (approx 10px) gap between the two columns.
http://www.bootply.com/vaOb1WdR5I
Can this be done?
Both boxes would need to reduce by 5 pix (in the above example), as I need the total width to remain.
Edit: Some ideas nearly work, but I am getting an extra Well that I don't want. With this:
<div class="row">
<div class="col-md-6">
#Html.Action("ShowDuePayments", "Transaction")
</div>
<div class="col-md-6">
#Html.Action("ShowRecentTransactions", "Transaction")
</div>
</div>
I get this:
The 'under' well div shouldn't be visible.
A couple of points:
You shouldn't add extra classes to the Bootstrap columns (that's not a hard and fast rule, but a good recommendation)
You are missing the container wrap.
Make changes using those rules and it looks like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well">Left Top Box</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well">Left Bottom Box</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="well">Right Box</div>
</div>
</div>
</div>
How about this?
<div class="row">
<div class="col-md-6" style='padding-right:5px'>
<div class='well'>
Left Box
</div>
</div>
<div class="col-md-6" style='padding-left:5px'>
<div class='well'>
Right
</div>
</div>
</div>
http://www.bootply.com/Ogrte6IQzw
If you remove the inline styling, you will have the natural spacing provided by bootstrap, which is 15px padding.
You can change the class of col-md-6 and add width:49%, and to the 2nd div add pull-right class like:
HTML:
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well pull-right">
Right
</div>
</div>
CSS:
.col-md-6{
width:49%;
}
You can also try to add padding to the two div tags ie:
.col-md-6{
padding:5px;
}
This would add a bit of padding to all the sides - unless you use padding-left & padding-right and assign different class names to the divs - depending on how you want your code to be layed out.
You could also use an additional class so you only modify special column-6 elements and not all on your site. This example also uses percentage based widths as Flopet17s. You could tweak the percentage number to better fit your desired gap width.
.withgap {
width: 49%;
margin-right:1%;
}
<div class="row">
<div class="col-md-6 well withgap">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>
In Bootstrap, I am using col-md-6 to bring two columns but how to remove the gap in the middle and fill the spaces?
For example in photoshop:
HTML Code:
<div class="row">
<div class="col-md-6">
<div class="blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="red-section">
2
</div>
</div>
</div>
Note: I just want to apply for this section only, not everything by default.
Assuming that you want to have just the backgrounds touching, then you don't need to do anything. The column gutters (that are represented on your photoshop file by the blue lines) in Bootstrap are produced by padding. So, you can simply do the following to achieve what's in your photoshop file:
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 blue-section">
1
</div>
<div class="col-md-6 red-section">
2
</div>
</div>
</div>
CSS:
.blue-section{background:blue;}
.red-section{background:red;}
This will result in still having padding for your content.
Use the .row with negative margins to remove the gutter (padding) between columns..
<div class="row">
<div class="col-md-6">
<div class="row blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="row red-section">
2
</div>
</div>
</div>
Demo: http://www.bootply.com/TytFvxummt
It's a pretty old question, but just to make it helpful for anyone coming now, Bootstrap now has a g (gutter) class which removes the spaces in between edges of columns.
<div class="row g-0"> // the g-0 will remove all spaces. Ranges from 0-5.
<div class="col-6">
// content
</div>
<div class="col-6">
// content
</div>
</div>
For Bootstrap 5, you can refer to this link as well if needed: https://getbootstrap.com/docs/5.0/layout/gutters/
i think you have to take your structure like this
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">1</div>
</div>
<div class="col-md-6">
<div class="row">2</div>
</div>
</div>
</div>
Using this:
<div class="row">
<div class="col-md-6">
<div class="blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="red-section">
2
</div>
</div>
</div>
Will achieve that, have you added any padding or margins on the divs? By default there is none on the bootstrap rows/cols. So it must be with the css on .red-section & .blue-section?
I added a background colour to the cols so you can see, http://jsfiddle.net/bnyrL54u/
Hope this helps.