I’m trying to center a container and I’m using twitter bootstrap 4
Here’s the html
<div class="container">
<div class="features">
<h3 class="text-center mb-5">So many ways to connect with all your friends</h1>
<div class="row">
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="49824.php" alt="A simple MacBook Air with a glass of water next to it">
<div class="card-body">
<h5 class="card-title">Mac users are lucky!</h5>
<p class="card-text">Our application designed for Mac users allows them to have a more stable version of our interface as well as a more pleasant design and unbeatable speed.<br>
More secure, easier, and more efficient.</p>
<div class="text-center mt-4">
<a href="#" class="btn btn-primary">Download</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="1114478.php" alt="A brown-haired woman smiling while being on the phone">
<div class="card-body">
<h5 class="card-title">Broadcom Wi-Fi</h5>
<p class="card-text">With our technology 'Broadcom Wi-Fi', calling your friends has never been so easy before!<br>You can call them outside of your house, even when there's no Wi-Fi around you.<br><br></p>
<div class="text-center mt-4">
<a href="#" class="btn btn-primary">Try</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="59843.php" alt="A group of friends discussing in a classroom">
<div class="card-body">
<h5 class="card-title">Keep contact with your friends.</h5>
<p class="card-text">A good reason for using Messenger is that you can stay in contact with anyone you meet in life.<br>Add your friends by adding their unique IDs.</p>
<div class="text-center mt-4">
<a href="#" class="btn btn-primary">Get an ID</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
heres a preview of the css (im gonna post all of my stylesheet because i dont have a clue of how does this works):
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight:700 !important;
}
p {
font-weight:300;
}
body {
background:#fff !important;
font-family:'Roboto', sans-serif !important;
}
select {
padding:0 30px 0 10px !important;
-webkit-padding-end: 30px !important;
-webkit-padding-start: 10px !important;
}
span.navbar-text {
font-size:9pt;
color:rgba(0,0,0,.55);
font-weight:400;
}
p.desc {
color:rgba(0,0,0,.55);
}
.dropdown-menu {
background:#fff !important;
border-radius:0 !important;
font-weight:300 !important;
color:rgba(0,0,0,.55) !important;
max-width:50%;
position:absolute;
}
a.dropdown-item {
font-weight:300 !important;
color:rgba(0,0,0,.55) !important;
}
.navbar {
border-bottom:1px solid rgba(0,0,0,0.04);
background:#fff;
}
.jumbotron {
background:rgba(255,255,255,0);
color:#000;
margin:0 auto;
border-radius:0;
}
.px-11 {
font-size:11pt;
}
.pd-20 {
padding-top:20px;
}
img.brand {
transition:transform 0.5s ease;
}
img.brand:hover {
transform: scale(1.06);
}
ul.navbar-nav {
margin-left:10px;
}
a {
letter-spacing:0.1px;
font-size:11pt;
font-weight:300;
color: rgba(0, 0, 0, .55);
}
li.active > a {
font-weight:500;
}
li {
padding-right:10px;
}
a:hover {
color:#000;
text-decoration:underline;
}
.brand-text {
font-size:11pt;
font-weight:300;
color:#000;
position:relative;
}
h1 {
color:#000;
}
.form-control {
border-radius:6px;
background:#fff;
color:rgba(0,0,0,.55);
font-size:10pt;
font-weight:300;
border:1px solid rgba(0,0,0,0.04);
width:50%;
letter-spacing:-0.1px;
padding:20px 15px;
}
.form-control:focus {
border:1px solid rgba(0,0,0,0.08);
box-shadow:none;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all 0.2s ease;
}
label {
font-weight:300;
font-size:11pt;
}
.btn {
background:#0078FF;
color:#fff;
font-size:10pt;
border-radius:3px;
font-weight:500;
}
.btn:hover {
color:#fff;
}
.smart-scroll{
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.scrolled-down{
transform:translateY(-100%); transition: all 0.3s ease-in-out;
}
.scrolled-up{
transform:translateY(0); transition: all 0.3s ease-in-out;
}
.card-title {
font-size:16pt !important;
font-weight:700 !important;
}
.card-text {
font-size:9pt;
font-weight:400;
color:rgba(0,0,0,.55);
}
.card {
border-radius:10px;
border:0;
box-shadow:0px 0px 20px rgba(0,0,0,.07) !important;
}
.features {
margin-top:75px !important;
margin-bottom:50px;
}
here’s a preview of my problem below:
2
Answers
in such cases just use
works 95% of the time
Remove width from div has class card
to:
use padding and margin for your col div or your card div => https://getbootstrap.com/docs/4.1/utilities/spacing/