Bootstrap row only half-width?

#1

Hey everyone. Just finishing up my portfolio page (for now) and my row of bootstrap buttons in the “contact” section are only going halfway across the page. I’m trying to use div class=“row” and div class=“col-md-6 offset-md-3” to center them but they’re only on the right half of the page. I wonder if I maybe accidentally nested the grid inside a col-6 somewhere?

link to codepen here, thanks much!

#2

I noticed that both version 3 and 4 of Bootstrap are added. Which one do you want to use?

#3

That’s a good question. I think I only meant to add 4 but I’m honestly not sure what the difference is.

#4

Bootstrap 4 uses flexbox, which is a more flexible (and pleasant) way of doing layouts on a webpage. Bootstrap 3 uses floats, but overall it’s pretty solid. The Bootstrap lessons on fCC use version 3.

Since you’re saying that you don’t know the difference, I’m going to assume that you have version 3 in mind. The class for offsetting is col-md-offset-3, not offset-md-3. It should center the column itself, but note that its contents are still left-aligned. Since the contents of this column are just <a> elements, you can add the text-center class to this column as well.

<div class="col-md-6 col-md-offset-3 text-center">
  <a href="...">Twitter</a>
  ...
</div>
1 Like
#5

That definitely fixed my contact page problem. I fixed the code to what you recommended, and had to delete bootstrap 4 from the page in order to make it work. However, I must have been doing something bootstrap 4-related in my portfolio and about me pages, because now the text and pictures don’t line up next to each other. How can I use bootstrap 3 to make them do this, or how can I use bootstrap 4 to make the contact buttons look the way they do currently?

#6

In general it’s not a good idea to use both versions on the same project. What do you mean by the text and pictures not lining up with each other?

#7

nevermind, I found out how to do it in bootstrap 4 using the class “justify-content-center.” Before I deleted bootstrap 3 from the page, in a few places where I had images and text in the same row next to each other, they were no longer aligned horizontally and instead one would be over the other, both full-width. So, rather than fixing my contact buttons to the correct class for bootstrap 3, I fixed them to the correct class for bootstrap 4.

I don’t know how well I’m explaining myself. Either way you’ve been very helpful, kevcomedia!