CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Jeka Tay
Jeka Tay

Reputation: 33

bootstrap 3 have two buttons aligned in the same row

i have the following html code, and i use bootstrap 3. What i try to achieve is to have the 4 buttons with the klasse text, be the first two in the same row, and the next two, in the next row. Now each button is shown in its own row.

How the below code should be altered? 

<div class="background-image background-image--attachment-scroll" style="background-image: url(http://sitefront.png);">&nbsp;</div>

<div class="background-image-overlay region--dark-typography region--white-background" style="opacity: 0.0;background-size:contain;">&nbsp;</div>


<div class="container-fluid region--dark-typography region--white-background">
  <div class="clearfix block block-block-content block-block-content58f3bb9a-975d-4cef-bb21-a0e3d14ec934" id="block-howprofessionalisourstaff">
    <div class="content">
      <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
        <div class="row bottom-spacing-medium">
          <div class="col-md-8 col-md-offset-2 text-center">
            <div class="row bottom-spacing-medium">
              <div class="col-md-8 col-md-offset-2 text-center">
                <div class="bottom-spacing-large">
                  <p class="text-center"><a class="button" href="http://site/">klasse 1</a><a class="button" href="http://site">klasse 2</a><a class="button" href="http://site/">klasse 3</a><a class="button" href="http://site/">klasse 4</a></p>
                </div>

                <div class="scroll-button smooth-scroll"><a href="#page-start"><span class="sr-only">Content start</span></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

The problem with all suggested solutions, is that when i use the following drupal theme button class, it does not force buttons to be on the same row, when i have for instance text as large as the following in all buttons: Use Bootstrap’s custom button styles for actions in forms... https://www.drupal.org/project/showcase_lite

Upvotes: 0

Views: 1566

Answers (2)

Matt
Matt

Reputation: 492

Not sure if it is what you would like to achieve, please let me know, if not I'll give you more solutions:

Basically I have deleted button klasse3 & klasse4 from the "p class text-center" and I have added them into another "p class text-center" below. This is a simple solution, but I think you could achieve a better result with a different solution

Actual Button

<!DOCTYPE html>
<html class="jelly-page">
<head>
<meta charset="utf-8">

        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
         <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
	
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
    <link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />      
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />      
    <link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css" />  

       
</head>
<body >

	
	<div class="background-image background-image--attachment-scroll" style="background-image: url(http://sitefront.png);">&nbsp;</div>

    <div class="background-image-overlay region--dark-typography region--white-background" style="opacity: 0.0;background-size:contain;">&nbsp;</div>


    <div class="container-fluid region--dark-typography region--white-background">
    <div class="clearfix block block-block-content block-block-content58f3bb9a-975d-4cef-bb21-a0e3d14ec934" id="block-howprofessionalisourstaff">
    <div class="content">
    <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
    <div class="row bottom-spacing-medium">
    <div class="col-md-8 col-md-offset-2 text-center">
    <div class="row bottom-spacing-medium">
    <div class="col-md-8 col-md-offset-2 text-center">
    <div class="bottom-spacing-large">
    <p class="text-center">
		<a class="btn btn-default" href="http://site/">klasse 1</a>
		<a class="btn btn-default" href="http://site">klasse 2</a>
	</p>
		
	 <p class="text-center">
		
		<a class="btn btn-default" href="http://site/">klasse 3</a>
		<a class="btn btn-default" href="http://site/">klasse 4</a></p>	
    </div>
		
		

    <div class="scroll-button smooth-scroll"><a href="#page-start"><span class="sr-only">Content start</span></a></div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
	
</body>
</html>

Plain text

<!DOCTYPE html>
<html class="jelly-page">
<head>
<meta charset="utf-8">

        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
         <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
	
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
    <link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />      
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />      
    <link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css" />  

       
</head>
<body >

	
	<div class="background-image background-image--attachment-scroll" style="background-image: url(http://sitefront.png);">&nbsp;</div>

    <div class="background-image-overlay region--dark-typography region--white-background" style="opacity: 0.0;background-size:contain;">&nbsp;</div>


    <div class="container-fluid region--dark-typography region--white-background">
    <div class="clearfix block block-block-content block-block-content58f3bb9a-975d-4cef-bb21-a0e3d14ec934" id="block-howprofessionalisourstaff">
    <div class="content">
    <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
    <div class="row bottom-spacing-medium">
    <div class="col-md-8 col-md-offset-2 text-center">
    <div class="row bottom-spacing-medium">
    <div class="col-md-8 col-md-offset-2 text-center">
    <div class="bottom-spacing-large">
    <p class="text-center">
		<a class="button" href="http://site/">klasse 1</a>
		<a class="button" href="http://site">klasse 2</a>
	</p>
		
	 <p class="text-center">
		
		<a class="button" href="http://site/">klasse 3</a>
		<a class="button" href="http://site/">klasse 4</a></p>	
    </div>
		
		

    <div class="scroll-button smooth-scroll"><a href="#page-start"><span class="sr-only">Content start</span></a></div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
	
</body>
</html>

Upvotes: 0

MajiD
MajiD

Reputation: 2585

you need something like this

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <a class="btn btn-primary" href="http://site/">klasse 1</a>
    <a class="btn btn-primary" href="http://site">klasse 2</a>
  </div>
  <br>
  <div class="row">
    <a class="btn btn-primary" href="http://site/">klasse 3</a>
    <a class="btn btn-primary" href="http://site/">klasse 4</a>
  </div>
</div>

Upvotes: 2

Related Questions