Menu
I tried looking this up here but I can't find anything related to this specific problem.
I'm trying to make a header which has a button on the left and right of the screen with a logo in the middle, but whenever I make the window smaller or larger the button on the right doesnt stay aligned.
Small window
Large window
Here is the code:
<header>
<div id="container-fluid">
<div class="row">
<div class=" col-2">
Menu
</div>
<div class="col-8 text-center ">
Logo
</div>
<div class="col-2 float-right">
Contact
</div>
</div>
</div>
</header>
What am I missing here?
Thanks in advance.
Fixed it, code now looks like this:
<body>
<header>
<div id="container-fluid">
<div class="row">
<div class="col">
<span class="float-left">Menu</span>
</div>
<div class="col text-center">
Logo
</div>
<div class="col">
<span class="float-right">Contact</span>
</div>
</div>
</div>
</header>
</body>
372
asked Dec 05 '17 16:12
Answer: Use the text-right Class You can simply use the class . text-right on the containing element to right align your Bootstrap buttons within a block box or grid column. It will work in both Bootstrap 3 and 4 versions.
If you want to move the button to the right, you can also place the button within a <div> element and add the text-align property with its "right" value to the "align-right" class of the <div>.
wrap your content so it can be aligned according to the parent container.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<header>
<div id="container-fluid">
<div class="row">
<div class="col-2">
<span class="float-left">Menu</span>
</div>
<div class="col-8 text-center">
Logo
</div>
<div class="col-2">
<span class="float-right">Contact</span>
</div>
</div>
</div>
</header>You can use the flex-bootstrap-class and justify-content for this approach:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row d-flex justify-content-between bg-light">
<div class="p-2 bg-dark text-light">
Menu
</div>
<div class="p-2 bg-dark text-light">
Logo
</div>
<div class="p-2 bg-dark text-light">
Contact
</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
