How to center divs on mobile in bootstrap 3? - html

Question

I gived the .fejlec div this css code:
#media only screen and (max-width: 768px) {
.fejlec
{
text-align: center;
}
}
But it doent align my divs center on mobile. I want to align center these divs:
- .fejlec_logo
- .fejlec_kereses
- .fejlec_kedvencek
- .fejlec_kosar
On the uploaded photo, you can see that how it looks now.
https://imgur.com/a/vh7AGY4
<div class="container fejlec">
<div class="row">
<div class="col-md-3 col-xs-12 fejlec_logo">
<a title="<?php echo html($site_config['logo_text']); ?>" class="navbar-brand logo clearfix" href="<?php echo $host; ?>">
<span class="logo_text_1"><?php echo html($site_config['logo_text']); ?></span><span class="logo_text_2"><?php echo html($site_config['logo_slogen']); ?></span>
</a>
</div>
<div class="col-md-5 col-xs-12 fejlec_kereses">
<form role="search" name="header_search_form" id="header_search_form" method="post" onsubmit="search_k();return false;">
<div class="input-group stylish-input-group bc-wrapper">
<input type="text" class="form-control header_search_input" autocomplete="off" placeholder="Termékek keresése..." name="country_id" id="country_id" onkeyup="autocomplet();" >
<span class="input-group-addon">
<i class="fa fa-spinner fa-spin" id="search_progress"></i>
<input type="hidden" name="search_date" id="search_date" value="" />
<button type="submit" class="header_search_button"><i class="fa fa-search header_search_icon" aria-hidden="true"></i></button>
</span>
</div>
<div class="bc-menu list-group" id="country_list_id"></div>
</form>
</div>
<div class="col-md-2 col-xs-12 fejlec_kedvencek">
<i class="fa fa-heart" aria-hidden="true"></i> Kedvenc termékeim
</div>
<div class="col-md-2 col-xs-12 fejlec_kosar">
<a href="<?php echo $host; ?>/ajanlatkeres" title="Kosár">
<span class="header_kosar_text"><i class="fa fa-shopping-basket fejlec_kosar_ikon" aria-hidden="true"></i> Ajánlatkérés</span>
<span id="header_kosar_text"></span>
<div class="clearfix"></div>
</a>
</div>
</div>
</div>

Answer 1

Try old fashioned margin: 0 auto;:
.fejlec
{
float: none;
margin: 0 auto;
}

Answer 2

Just use class of bootstrap
text-center
moreover
you are using text-center alignment in the container itself so it won't work that way,
you have to provide fejlec class in the col divs like below
<div class="col-md-5 col-xs-12 fejlec_kereses fejlec">
<form role="search" name="header_search_form" id="header_search_form" method="post" onsubmit="search_k();return false;">
<div class="input-group stylish-input-group bc-wrapper">
<input type="text" class="form-control header_search_input" autocomplete="off" placeholder="Termékek keresése..." name="country_id" id="country_id" onkeyup="autocomplet();" >
<span class="input-group-addon">
<i class="fa fa-spinner fa-spin" id="search_progress"></i>
<input type="hidden" name="search_date" id="search_date" value="" />
<button type="submit" class="header_search_button"><i class="fa fa-search header_search_icon" aria-hidden="true"></i></button>
</span>
</div>
<div class="bc-menu list-group" id="country_list_id"></div>
</form>
</div>