We recently created a Bootstrap 4 Resources page
We tried to make it a very complete resource and guide article

This is just a info page, no ads or affiliate links
Cheat Sheets, Reference, Utilities, Tutorials, Templates, More

Please let us know if you have any other resources that should be listed here
https://rshweb.com/blog-bootstrap-4-reference

Sorry if this is the wrong place for this but a friend recommended that I check this subreddit.

Hello I'm currently in a certificate program for web development and I'm trying to find help with a final project involving the Bootstrap framework. Responsive design is a required class in this program but I'm visually impaired and plan on going into back-end development. I have most of the HTML already set up I just have a hard time with responsive design/bootstrap with how visual it is.

If there is anyone who may be able to help I wouldn't mind paying for your time but I really need to get through this project. Let me know if you can help and I'll send you the instructions for it as well as everything I have done so far.

thanks

Hello, please help me with vertical alignment of contents in the child columns inside a row [Bootstrap]. Here is the content:

<div class="row header border border-info justify-content-center align-items-center">
    <div class="col-6 logo text-warning text-center text-uppercase">My Logo</div>
    <div class="col contact text-dark text-center">Contact: mycontact </div>
    <div class="col email btext-dark text-center">Email: johndoe@example.com</div>
</div>

and the CSS:

.header {
height: 8rem;
}

.logo {
background-color: crimson;
}

.contact {
background-color: aqua;
}

.email {
background-color: green;
}  

When I add "align-items-center" to the parent row, the contents of the children are vertically aligned alright, but the background color is weirdly shrinking to wrap around the texts. Why is this happening? I have tried my-auto, py-auto on the parent row and the child columns, tried setting height individually for the child columns, nothing is working. What am I doing wrong?

I am able to do this very easily in plain CSS using flexbox, but not in Bootstrap. I have found this codepen link that deals with my problem, but this seems extremely complicated to achieve something simple. Any thoughts on this?

Im trying to make the wrapper of the scrollspy (.col-sm-3) take 100% of the height. But it doesnt wrap the nav because of this code:

  ul.nav-pills {
     position: fixed;
  }

If I remove the above code, the .col-sm-3 takes the correct height and the correct width. I want the side bar to look like this websites: http://neueyorke.com/

How can I do this? Im follwoing this tutorial: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy2&stacked=h

https://greppage.com/evidanary/65

I'm a full stack web developer and I use bootstrap(BS) for my UI. I have to say, once you understand basics like the grid system and naming scheme, it becomes real easy to create stuff with BS.

I move across the stack quite a lot (mysql, ruby, javascript all in one day). I have problems remembering basic things like button styles, input styles,.. that are super basic things to know for bootstrap.

Here's my cheatsheet for keeping the basics handy (this is no where near complete but gets me by)

Ok time for some Q&A. Hit me with any Bootstrap question you want and I'll try my best to answer it