CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Echchama Nayak
Echchama Nayak

Reputation: 933

Shift container completely to the left

I have the following page

Page

How can I shift the grey section and the heading 'Start Analysis' to the left along with all the contents.

The code is as follows 

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script type=text/javascript src="/static/js/jquery.js"></script>
    <script src="/static/js/bootstrap.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
</head>

<body>
<nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <!-- Removed IPD link -->
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="/">Home</a></li>
            <li><a href="/about">About Us</a></li>
            <!-- changed name (seenu.andi-rajendran) -->
            <li><a href="/select_doc">Detect Suspicious Passage(s)!</a></li>
            <!-- Added Help -->
            <li><a href="/help">Help</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>




    <div class="container" xmlns="http://www.w3.org/1999/html">
        <!-- Changed heading -->
        <h1>Start Analysis</h1>
        <div class="jumbotron">

            <div class="form-group">


                <form action='/view_doc'>

                    <div class="form-group">
                        <label for="usr">Select Doc:</label>
                        <select name="doc">

                                <option value='source2'>source2</option>

                                <option value='hamlet_clean'>hamlet_clean</option>

                                <option value='test1'>test1</option>

                                <option value='Tz'>Tz</option>

                                <option value='test3'>test3</option>

                                <option value='emma_clean'>emma_clean</option>

                                <option value='Gdp'>Gdp</option>

                                <option value='easy_source'>easy_source</option>

                                <option value='test2'>test2</option>

                                <option value='Ao'>Ao</option>

                                <option value='easy_test'>easy_test</option>

                                <option value='emma_and_shakespeare'>emma_and_shakespeare</option>

                                <option value='Vm'>Vm</option>

                                <option value='Rlm'>Rlm</option>

                                <option value='Ww'>Ww</option>

                                <option value='rowling_and_dickens'>rowling_and_dickens</option>

                                <option value='source1'>source1</option>

                                <option value='Tmm'>Tmm</option>

                                <option value='test4'>test4</option>

                                <option value='source3'>source3</option>

                                <option value='sample_files'>sample_files</option>

                                <option value='Aaf'>Aaf</option>

                        </select>
                    </div>
                <br>
                 <div class="form-group">
                     <!-- Added heading -->
                    <h3>Style Model</h3>

                     <!-- Pushed style model loading option upwards-->
                     <div class="form-group">
                    <i>Load existing Style Model ?</i>&emsp;
                    <input type="radio" name='qload' value="yes"
                           onclick="document.getElementById('load_config').style.display = 'block';document.getElementById('over_config').style.display = 'block';"><i>Yes</i>
                    <input type="radio" name='qload' value="no"
                           onclick="document.getElementById('load_config').style.display = 'none';document.getElementById('over_config').style.display = 'none';"
                           checked><i>No</i><br>
                    </div>

                <label>Atom Type:</label>

                        <input type="radio" class="atomClass" name="atom" value="paragraph">
                        paragraph&emsp;

                        <input type="radio" class="atomClass" name="atom" value="sentence">
                        sentence&emsp;

                        <input type="radio" class="atomClass" name="atom" value="nchars">
                        nchars&emsp;

                </div>
                <br>
                    <div class="form-group">
                <label>Stylistic Feature(s):</label>
                    <select id="features" name="features" multiple>
                    </select>


                </div>
                <br>
                <div class="form-group">
                    <!--Modified Clustering Method heading-->
                <label>Clustering Method:</label>
                    <select name="cluster_method">

                            <option value="kmeans">kmeans</option>

                            <option value="agglom">agglom</option>

                            <option value="density_based">density_based</option>

                            <option value="hmm">hmm</option>

                            <option value="none">none</option>

                            <option value="cos">cos</option>

                    </select>
                &emsp;<!--Modifiying cluster value-->
                <label>No. of cluster:</label>

                    <select name="k">
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </div>

                    <div class="form-group">
                        <!-- included creation/modification of style models(seenu.andi-rajendran)-->
                    <br><i>Save Style Model ?</i>&emsp;
                    <input type="radio" class="save_config" name="save_config" value="yes"
                           onclick="document.getElementById('fname').style.display = 'block';"><i>Yes</i>
                    <input type="radio" class="save_config" name="save_config" value="no"
                           onclick="document.getElementById('fname').style.display = 'none';" checked><i>No</i><br>
                    <div id="fname" class="form-group" style="display: none;"><i>Style Model file name</i>&emsp;
                        <input type="text" name="fname" value="" width="30" height="30"><br>
                    </div>
                    </div>


                    <div id="over_config" class="form-group" style="display: none;"><i>Overwrite Style Model ?</i>&emsp;
                        <input type="radio" name="over_config" value="yes"> <i>Yes</i>
                        <input type="radio" name="over_config" value="no" checked><i>No</i><br>
                    </div>


                    <div id="load_config" class="form-group" style="display: none;">
                        <i>Load Style Model</i>&emsp;
                        <select name="lname">

                                <option value='blah.json'>blah.json</option>

                                <option value='new'>new</option>

                                <option value='arun'>arun</option>

                                <option value='seenu_arun'>seenu_arun</option>

                                <option value='blah'>blah</option>

                                <option value='test'>test</option>

                                <option value='seenu'>seenu</option>

                                <option value='sddsds'>sddsds</option>

                                <option value='test7'>test7</option>

                        </select>
                    </div>


                    <div class="btn btn-default">
                        <input type='submit' value='Go'>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- loading of stylistic features according to atom type when selected (seenu.andi-rajendran)-->

</body>
</html>

I am using boostrap-min 3.0.0. I have viewed som eexisting answers but most of them describe how to transfer the text and images which is not working in my case. Please help

Upvotes: 2

Views: 3618

Answers (3)

Mohammad Usman
Mohammad Usman

Reputation: 39322

In Bootstrap .container class has following styles:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

The above styles makes an element having class .container as centered always. You will need to override these styles a bit.

Here are 2 possible ways:

Method #01:

You can override margin-left property by replacing auto value with 0 i.e.

.container {
  margin-left: 0;
}


@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.container {
  margin-left: 0;
}
<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <!-- Removed IPD link -->
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li><a href="/">Home</a></li>
      <li><a href="/about">About Us</a></li>
      <!-- changed name (seenu.andi-rajendran) -->
      <li><a href="/select_doc">Detect Suspicious Passage(s)!</a></li>
      <!-- Added Help -->
      <li><a href="/help">Help</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>
<div class="container" xmlns="http://www.w3.org/1999/html">
  <!-- Changed heading -->
  <h1>Start Analysis</h1>
  <div class="jumbotron">

    <div class="form-group">


      <form action='/view_doc'>

        <div class="form-group">
          <label for="usr">Select Doc:</label>
          <select name="doc">

            <option value='source2'>source2</option>

            <option value='hamlet_clean'>hamlet_clean</option>

            <option value='test1'>test1</option>

            <option value='Tz'>Tz</option>

            <option value='test3'>test3</option>

            <option value='emma_clean'>emma_clean</option>

            <option value='Gdp'>Gdp</option>

            <option value='easy_source'>easy_source</option>

            <option value='test2'>test2</option>

            <option value='Ao'>Ao</option>

            <option value='easy_test'>easy_test</option>

            <option value='emma_and_shakespeare'>emma_and_shakespeare</option>

            <option value='Vm'>Vm</option>

            <option value='Rlm'>Rlm</option>

            <option value='Ww'>Ww</option>

            <option value='rowling_and_dickens'>rowling_and_dickens</option>

            <option value='source1'>source1</option>

            <option value='Tmm'>Tmm</option>

            <option value='test4'>test4</option>

            <option value='source3'>source3</option>

            <option value='sample_files'>sample_files</option>

            <option value='Aaf'>Aaf</option>

          </select>
        </div>
        <br>
        <div class="form-group">
          <!-- Added heading -->
          <h3>Style Model</h3>

          <!-- Pushed style model loading option upwards-->
          <div class="form-group">
            <i>Load existing Style Model ?</i>&emsp;
            <input type="radio" name='qload' value="yes"
                   onclick="document.getElementById('load_config').style.display = 'block';document.getElementById('over_config').style.display = 'block';"><i>Yes</i>
            <input type="radio" name='qload' value="no"
                   onclick="document.getElementById('load_config').style.display = 'none';document.getElementById('over_config').style.display = 'none';"
                   checked><i>No</i><br>
          </div>

          <label>Atom Type:</label>

          <input type="radio" class="atomClass" name="atom" value="paragraph">
          paragraph&emsp;

          <input type="radio" class="atomClass" name="atom" value="sentence">
          sentence&emsp;

          <input type="radio" class="atomClass" name="atom" value="nchars">
          nchars&emsp;

        </div>
        <br>
        <div class="form-group">
          <label>Stylistic Feature(s):</label>
          <select id="features" name="features" multiple>
          </select>


        </div>
        <br>
        <div class="form-group">
          <!--Modified Clustering Method heading-->
          <label>Clustering Method:</label>
          <select name="cluster_method">

            <option value="kmeans">kmeans</option>

            <option value="agglom">agglom</option>

            <option value="density_based">density_based</option>

            <option value="hmm">hmm</option>

            <option value="none">none</option>

            <option value="cos">cos</option>

          </select>
          &emsp;<!--Modifiying cluster value-->
          <label>No. of cluster:</label>

          <select name="k">
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
        </div>

        <div class="form-group">
          <!-- included creation/modification of style models(seenu.andi-rajendran)-->
          <br><i>Save Style Model ?</i>&emsp;
          <input type="radio" class="save_config" name="save_config" value="yes"
                 onclick="document.getElementById('fname').style.display = 'block';"><i>Yes</i>
          <input type="radio" class="save_config" name="save_config" value="no"
                 onclick="document.getElementById('fname').style.display = 'none';" checked><i>No</i><br>
          <div id="fname" class="form-group" style="display: none;"><i>Style Model file name</i>&emsp;
            <input type="text" name="fname" value="" width="30" height="30"><br>
          </div>
        </div>


        <div id="over_config" class="form-group" style="display: none;"><i>Overwrite Style Model ?</i>&emsp;
          <input type="radio" name="over_config" value="yes"> <i>Yes</i>
          <input type="radio" name="over_config" value="no" checked><i>No</i><br>
        </div>


        <div id="load_config" class="form-group" style="display: none;">
          <i>Load Style Model</i>&emsp;
          <select name="lname">

            <option value='blah.json'>blah.json</option>

            <option value='new'>new</option>

            <option value='arun'>arun</option>

            <option value='seenu_arun'>seenu_arun</option>

            <option value='blah'>blah</option>

            <option value='test'>test</option>

            <option value='seenu'>seenu</option>

            <option value='sddsds'>sddsds</option>

            <option value='test7'>test7</option>

          </select>
        </div>


        <div class="btn btn-default">
          <input type='submit' value='Go'>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- loading of stylistic features according to atom type when selected (seenu.andi-rajendran)-->

Method #02:

You can use Bootstrap's Quick float class pull-left along-width .container class:

<div class="container pull-left">
    // content goes here...
</div>

And following css in your custom styles:

@media (max-width: 767px) {
  .container {
    width: 100%;
  }
}


@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

@media (max-width: 767px) {
  .container {
    width: 100%;
  }
}
<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <!-- Removed IPD link -->
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li><a href="/">Home</a></li>
      <li><a href="/about">About Us</a></li>
      <!-- changed name (seenu.andi-rajendran) -->
      <li><a href="/select_doc">Detect Suspicious Passage(s)!</a></li>
      <!-- Added Help -->
      <li><a href="/help">Help</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

<div class="container pull-left" xmlns="http://www.w3.org/1999/html">
  <!-- Changed heading -->
  <h1>Start Analysis</h1>
  <div class="jumbotron">

    <div class="form-group">


      <form action='/view_doc'>

        <div class="form-group">
          <label for="usr">Select Doc:</label>
          <select name="doc">

            <option value='source2'>source2</option>

            <option value='hamlet_clean'>hamlet_clean</option>

            <option value='test1'>test1</option>

            <option value='Tz'>Tz</option>

            <option value='test3'>test3</option>

            <option value='emma_clean'>emma_clean</option>

            <option value='Gdp'>Gdp</option>

            <option value='easy_source'>easy_source</option>

            <option value='test2'>test2</option>

            <option value='Ao'>Ao</option>

            <option value='easy_test'>easy_test</option>

            <option value='emma_and_shakespeare'>emma_and_shakespeare</option>

            <option value='Vm'>Vm</option>

            <option value='Rlm'>Rlm</option>

            <option value='Ww'>Ww</option>

            <option value='rowling_and_dickens'>rowling_and_dickens</option>

            <option value='source1'>source1</option>

            <option value='Tmm'>Tmm</option>

            <option value='test4'>test4</option>

            <option value='source3'>source3</option>

            <option value='sample_files'>sample_files</option>

            <option value='Aaf'>Aaf</option>

          </select>
        </div>
        <br>
        <div class="form-group">
          <!-- Added heading -->
          <h3>Style Model</h3>

          <!-- Pushed style model loading option upwards-->
          <div class="form-group">
            <i>Load existing Style Model ?</i>&emsp;
            <input type="radio" name='qload' value="yes"
                   onclick="document.getElementById('load_config').style.display = 'block';document.getElementById('over_config').style.display = 'block';"><i>Yes</i>
            <input type="radio" name='qload' value="no"
                   onclick="document.getElementById('load_config').style.display = 'none';document.getElementById('over_config').style.display = 'none';"
                   checked><i>No</i><br>
          </div>

          <label>Atom Type:</label>

          <input type="radio" class="atomClass" name="atom" value="paragraph">
          paragraph&emsp;

          <input type="radio" class="atomClass" name="atom" value="sentence">
          sentence&emsp;

          <input type="radio" class="atomClass" name="atom" value="nchars">
          nchars&emsp;

        </div>
        <br>
        <div class="form-group">
          <label>Stylistic Feature(s):</label>
          <select id="features" name="features" multiple>
          </select>


        </div>
        <br>
        <div class="form-group">
          <!--Modified Clustering Method heading-->
          <label>Clustering Method:</label>
          <select name="cluster_method">

            <option value="kmeans">kmeans</option>

            <option value="agglom">agglom</option>

            <option value="density_based">density_based</option>

            <option value="hmm">hmm</option>

            <option value="none">none</option>

            <option value="cos">cos</option>

          </select>
          &emsp;<!--Modifiying cluster value-->
          <label>No. of cluster:</label>

          <select name="k">
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
        </div>

        <div class="form-group">
          <!-- included creation/modification of style models(seenu.andi-rajendran)-->
          <br><i>Save Style Model ?</i>&emsp;
          <input type="radio" class="save_config" name="save_config" value="yes"
                 onclick="document.getElementById('fname').style.display = 'block';"><i>Yes</i>
          <input type="radio" class="save_config" name="save_config" value="no"
                 onclick="document.getElementById('fname').style.display = 'none';" checked><i>No</i><br>
          <div id="fname" class="form-group" style="display: none;"><i>Style Model file name</i>&emsp;
            <input type="text" name="fname" value="" width="30" height="30"><br>
          </div>
        </div>


        <div id="over_config" class="form-group" style="display: none;"><i>Overwrite Style Model ?</i>&emsp;
          <input type="radio" name="over_config" value="yes"> <i>Yes</i>
          <input type="radio" name="over_config" value="no" checked><i>No</i><br>
        </div>


        <div id="load_config" class="form-group" style="display: none;">
          <i>Load Style Model</i>&emsp;
          <select name="lname">

            <option value='blah.json'>blah.json</option>

            <option value='new'>new</option>

            <option value='arun'>arun</option>

            <option value='seenu_arun'>seenu_arun</option>

            <option value='blah'>blah</option>

            <option value='test'>test</option>

            <option value='seenu'>seenu</option>

            <option value='sddsds'>sddsds</option>

            <option value='test7'>test7</option>

          </select>
        </div>


        <div class="btn btn-default">
          <input type='submit' value='Go'>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- loading of stylistic features according to atom type when selected (seenu.andi-rajendran)-->

Upvotes: 2

Momin
Momin

Reputation: 3320

Try this

Insert jumbotron class along with h1 tag into 

<div class="col-md-6 col-md-pull-6">
</div>

or 

<div class="col-md-6">
    insert.....here
</div>

<div class="col-md-6">
   Keep blank if you have no item to float right
</div>

Upvotes: 1

balaji thirumal
balaji thirumal

Reputation: 111

You can try using the following style,

.container{
float:left;
}

hope this helps.

Upvotes: 3

Related Questions