CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Anna
Anna

Reputation: 3

Bootstrap — Display Flex with margin

I have this HTML page, where I have an gallery of divs with texts inside it. I want the text to fit and come in the center of the div, but still want to keep the d-flex flex-wrap class for it to adjust based on the window size.

div.container-fluid {
    padding: 5px !important;
    margin: 0px !important;
}

div.word-card {
    display: table-cell;
    width: 300px;
    height: 350px;
    border: 1px solid black;
    vertical-align: middle;
}

span.word-text {
    font-size: 100px;
    margin:0px 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid d-flex flex-wrap">
    <div class="word-card">
        <span class="word-text">squander</span>
    </div>
    <div class="word-card">
        <span class="word-text">lead</span>
    </div>
    <div class="word-card">
        <span class="word-text">accurate</span>
    </div>
    <div class="word-card">
        <span class="word-text">Interdisciplinary</span>
    </div>
</div>

Right now, the texts in the divs are not fitting it, which I want it to fit with margin of 50px on left and right. I also want the texts to vertically align, which stopped working after I added the d-flex flex-wrap class. Can someone please help me? I'm a total beginner in CSS.

Upvotes: 0

Views: 6026

Answers (2)

Ajay-Dindayal
Ajay-Dindayal

Reputation: 31

Firstly, you can work by lowering the font size of your text within the divs, since it seems a bit too large to fit within the div.

To center the text, try this:

New CSS Code

 div.container-fluid {
    padding: 5px !important;
    margin: 0px !important;
    text-align: center;
}

div.word-card {
    display: table-cell;
    width: 300px;
    height: 350px;
    border: 1px solid black;
}

span.word-text {
    font-size: 20px;
   
}

Upvotes: 0

alotropico
alotropico

Reputation: 1994

The text is obviously to big for the word-card's height. Other than that, you could just match the line-height of the text with the height of the word-card, like so:

.word-card {
    display: table-cell;
    width: 300px;
    height: 350px;
    border: 1px solid black;
    text-align: center;
}

.word-text {
    font-size: 40px;
    line-height: 350px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid d-flex flex-wrap">
    <div class="word-card">
        <span class="word-text">squander</span>
    </div>
    <div class="word-card">
        <span class="word-text">lead</span>
    </div>
    <div class="word-card">
        <span class="word-text">accurate</span>
    </div>
    <div class="word-card">
        <span class="word-text">Interdisciplinary</span>
    </div>
</div>

Or for a more flexible solution, you could use flexbox:

.word-card {
    width: 300px;
    height: 350px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.word-text {
    font-size: 40px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid d-flex flex-wrap">
    <div class="word-card">
        <span class="word-text">squander</span>
    </div>
    <div class="word-card">
        <span class="word-text">lead</span>
    </div>
    <div class="word-card">
        <span class="word-text">accurate</span>
    </div>
    <div class="word-card">
        <span class="word-text">Interdisciplinary</span>
    </div>
</div>

Upvotes: 1

Related Questions