I think you want something like the following. html, body { height: 100%; } body { margin: 0; } .flex-container { height: 100%; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; } .row { width: auto; border: 1px solid blue; } .flex-item { background-color: tomato; padding: 5px; width: 20px; height: 20px; margin: 10px; … Read more
You can use css like this: #custom-text{ border: solid black 2px; } working demo
Try this .bigger { height: 300px !important; } .smaller { height: 99px !important; margin-bottom: 2px; } <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css” integrity=”sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B” crossorigin=”anonymous”> <div class=”container-fluid”> <div class=”row main”> <div class=”col-sm-6″> <div class=”col-sm-12″><p> 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error nihil consequuntur itaque placeat est voluptates, temporibus iste nesciunt dignissimos excepturi. </p> </div> <div class=”col-sm-12″> … Read more
Here’s how you do it: #container { display: flex; justify-content: space-between; } .flexItem:nth-child(1):nth-last-child(1) { margin: 0 auto; }
You have two ways to solve this. Either flexbox or CSS grid, both are good, but I prefer the CSS grid way: Flexbox .container { width: 100%; height: 600px; display: flex; align-items: center; justify-content: center; } .column { display: flex; flex-direction: column; height: 90%; width: 30%; } .box { background-color: gray; display: flex; align-items: center; … Read more